使用 vue-cli 快速创建 vue 项目步骤
GitHub地址是:https://github.com/vuejs/vue-cli
一、安装Nodejs
首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -v和npm -v,如果能显示出版本号,就说明安装成功。
注:注意cli要求的node版本
二、安装vue-cli
安装好node之后,我们就可以直接全局安装vue-cli:
npm install -g @vue/cli
使用这种方式可能会安装比较慢(因为要去国外拉代码),推荐大家使用国内的淘宝镜像来安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm和cnpm(windows)安装步骤及环境变量的改变:详见:https://blog.csdn.net/wjnf012/article/details/80422313?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161140297416780262517547%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161140297416780262517547&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-2-80422313.pc_search_result_before_js&utm_term=%E5%B7%B2%E7%BB%8F%E5%AE%89%E8%A3%85npm,%E6%80%8E%E4%B9%88%E5%AE%89%E8%A3%85cnpm&spm=1018.2226.3001.4187
输入以下命令,输出版本,表明安装成功
vue -V 查看vue-cli版本
三、创建项目(一定要联网,等待它下载完成)
创建名为myVue的项目:
vue create myVue
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
注:关于手动设置详见 VUE安装及启动项目
假如你忘记命令或者接下来你不知道要干嘛,那么你可以在命令行中输入
vue create --help
接下来按照规则创建即可
如果你需要使用cli2x版本生成项目,你可以
npm install -g @vue/cli-init
mkdir app
cd app
init :初始化我们的项目。
webpack-simple:使用的哪个模板,这里我们先使用webpack-simple模板
app:表示我们项目的名字,这名字可以自己命名,但不要起成系统软件的一些名字,比如vue,node,npm等
执行如下命令
vue init webpack app //
app为项目名称
接下来根据提示操作:
切换到当前目前,一定切换进来
cd app
下载当前项目所依赖的包
npm install
启动当前的项目
npm run dev
接下来见证奇迹的时刻来了,我们第一个vue的项目。只要出现如下界面,证明项目启动成功了。