vue-cli一分钟快速创建vue工程
2018-08-14 本文已影响24人
de_self
如何使用vuejs有两种方式,一种通过<script>直接引入下载的vue.js包,
另一种是通过npm进行下载。
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。(https://cn.vuejs.org/v2/guide/single-file-components.html)。
而创建vue工程,vue.js提供了vue-cli(vue脚手架)来帮助vue初学者或只需要简单的vue工程的开发人员来快速搭建vue程序,只需要安装nodejs即可。
8-14今天刚好看到vue-cli发布3.0正式版 (~~~~~再给自己挖个坑,试试3.0以后补)
--------------------------------------------正文开始------------------------------------------------
安装的nodejs本身包含了npm(前端的git+github-个人理解)。
到官网上找到nodejs下载包,下一步下一步下一步····结束
image.png
我习惯再下载一个gitBash用来写命令行
-v是查看版本的命令,也可查看电脑是否安装成功。
cnpm是npm的淘宝镜像,网络更稳定,比较适合国内用户。
安装方式是执行命令行:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装cnpm后,网上查到npm命令便可通过cnpm执行
安装vue原命令:
npm install vue
cnpm命令:
cnpm install vue
安装vue-cli
npm install vue-cli -g
创建vue-cli项目
vue init webpack project_name
image.png
在创建过程中,会有如图的选项,名字工程名就好
是否是vue工程·······你不创建vue'工程用vuecli干嘛
作者,,,,,您的大名,昵称,外号都可
vue build需要
vue-router一个插件需要
ESlint 您如果真的强,您开着,小弟我没这水平(一个变态级js语法检查插件,一个空格少了你这个程序就跑不起来)
单元测试 e2e测试 没用过不测了吧,关了好了
最后这个是否用npm创建项目!!!不要开,多少次npm有问题我项目跑不起来!!
最后,进入项目目录,install一下,安装一下依赖(刚创建一般不需要,但从别的地方下载的项目,这是必须的)
image.png
跑项目的命令!!!!!!!!!
cnpm run dev
image.png
最后出现这个提示,去这个端口就好了 image.png
成功创建~~~~~~~
据网上大神所言,vue-cli不适合创建公司完整大项目级别的工程,需公司前端架构师根据公司需求创建。