vue之cli脚手架安装和webpack-simple模板项目生成

使用 vue-cli 快速创建 vue 项目步骤

GitHub地址是:https://github.com/vuejs/vue-cli

一、安装Nodejs

首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -vnpm -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的项目。只要出现如下界面,证明项目启动成功了。

原文地址:https://www.cnblogs.com/hudaxian/p/14318486.html