使用控制台搭建vue-cli脚手架
注意:
1、安装前您需要查看自己是否有node环境 检查:node - v
2、如果没有的话,需要先搭建好才能进行下一步操作
(参考:https://www.cnblogs.com/sylys/p/11703067.html )
Vue-cli安装步骤:
1、控制台进入项目根目录文件夹
2、npm i -g vue-cli (使用npm全局安装vue-cli)
3、执行 vue list 可以看到很多实用的模板,这里实用的是 webpack
4、vue init webpack (初始化模板)
5、? Generate project in current directory? (Y/n) (是否在当前目录生成项目 是的话回车键)
6、项目名称不能出现大写字母!
1)?Project name (vuePro) (是否使用vuePro作为项目名------》抱歉,名称不能再包含大写字母。)
2)? Project name vuepro (回车)
7、?Project description (A Vue.js project) 可以写一些对这个项目的描述 ------- ? Project description A Vue.js project
8、?Vue build (Use arrow keys) 是否生成vue (回车)------ Vue build standalone
9、?Install vue-router? (Y/n) 是否安装路由 (根据需要 这里使用y) ----- Install vue-router? Yes
10、?Use ESLint to lint your code? (Y/n) (是否使用ESLint 作为代码检测工具) 这里是代码风格检查器.为确保风格,最好选择yes,后面出现使用哪种选项,选择第一个风格即可.【ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。 【ESlint 中文官方网站】:http://eslint.cn/ 】
11、 ?Pick an ESLint preset (Use arrow keys) 使用箭头键 选择 Eslint 预设 ----- Pick an ESLint preset Standard
12、? Set up unit tests (Y/n) (是否设置单元测试)
13、? Pick a test runner ---- Pick a test runner karma
14、? Setup e2e tests with Nightwatch? No
15、?Should we run `npm install` for you after the project has been created? (recommended) npm
# Installing project dependencies ...
> phantomjs-prebuilt@2.1.16 install F:\ProgramFiles\vue\vuePro\node_modules\phantomjs-prebuilt
> node install.js
。。。。
(因为需要下载很多的依赖,所以很慢,需要等待....)
16、nmp run dev 启动本地服务,打开网址:http://localhost:8080/
使用控制台搭建vue-cli脚手架的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 从0开始搭建vue+webpack脚手架(三)
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- 从0开始搭建vue+webpack脚手架(二)
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 从0开始搭建vue+webpack脚手架(一)
基于多数情况下都是使用vue-cli初始化项目, 却始终未去了解其原理.从零开始搭建,可以让自己更深层次的理解框架. 首先从最基本的npm 开始, 至于安装npm 和 node就不用再赘述了,那是前端 ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- 从0开始搭建vue+webpack脚手架(四)
之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...
随机推荐
- TCP学习笔记
TCP/IP 协议分层模型 TCP/IP 协议族按层次分别分为以下 4 层:应用层.传输层.网络层和数据链路层.层次化之后,每个层级只需要考虑自己的任务就可以了,不再需要弄清其他层级的功能了. TCP ...
- IIS新建项目
我在写网站的时候要 经常帮公司的游戏写界面,他们用的都是VS,然后要用IIS创建项目(配置环境)然后页面才能够在浏览器上看效果. 那就要先了解啥是IIS: IIS是Internet Informati ...
- es之java各种查询操作
matchAllQuery 匹配所有文档 queryStringQuery 基于Lucene的字段检索 wildcardQuery 通配符查询匹配多个字符,?匹配1个字符* termQuery 词条查 ...
- el-date-picker用法
需求:1.默认时间是当天开始到此刻的时间 2.快捷键为今天.昨天.最近一周.最近30天.最近90天 3.不可以清空,必选项
- Apache2.4常用编译参数
转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...
- PJSIP库设置Via地址
好记性不如烂笔头,解决项目问题,调试代码跟踪到PJSIP 设置Via地址位置,记录下来,以备后用. PJSIP库在方法stateless_send_transport_cb中设置Via地址值,该方法在 ...
- (转)用C#实现实现简单的 Ping 的功能,用于测试网络是否已经连通
本文转载自:http://blog.csdn.net/xiamin/archive/2009/02/14/3889696.aspx 用C#实现实现简单的 Ping 的功能,用于测试网络是否已经联通 1 ...
- leetcode 374猜数字大小
// Forward declaration of guess API. // @param num, your guess // @return -1 if my number is lower, ...
- LinkedBlockingDeque 源码分析
LinkedBlockingDeque LinkedBlockingDeque 能解决什么问题?什么时候使用 LinkedBlockingDeque? 1)LinkedBlockingDeque 是基 ...
- Vue知识整理7:vue中函数的应用
在vue中使用函数对字符串做相应的处理: split:分割字符,将每个字符分割为一个数组值: reverse:将字符进行逆序排序: join:将字符连接: 最终输出结果.