使用 vue-cli 脚手架构建 vue 项目

 

在构建项目之前，需要电脑已安装node。

构建项目之前需要安装vue-cli，全局安装：

npm install vue-cli -g

创建一个基于webpack模板的新项目:

vue init webpack 项目名称

回车之后需要输入配置：

C:\Users\SmallBag\Desktop\study\vue_test>vue init webpack vue_test

? Project name vue_test
? Project description study project
? Author future
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue_test".

完成后接着：

cd 项目名称

npm install

npm run dev

回车后即可运行项目。

复制地址 http://localhost:34923 在浏览器上面打开，可看到：

此时项目已经创建完成并且已经运行。

创建后的项目结构：

 

 

新版本vue-cli已改名为 @vue/cli,安装时需要

npm install @vue/cli -g

如果继续使用vue-cli进行安装，将会安装2.x最新版本，不会安装3.x以上版本，目前最新版本4.3.x

3.x新版本创建项目使用：

vue create 项目名称

如果希望继续使用：

 vue init webpack 项目名称

可以安装：

npm install @vue/cli-init