vue学习：使用vuecli脚手架新建vue工程项目

由于毕设想要用vue搭建前端界面&＃xff0c;就去学习了vue&＃xff0c;下面介绍如何使用nodeJS搭建一个本地的vue项目。

&＃xff08;1&＃xff09;安装node.js环境到本地

安装地址&＃xff1a;node.js 下载官网
安装最新版就可以了

&＃xff08;2&＃xff09;配置node.js

配置的话可以看这篇&＃xff1a;Node.js的安装及环境配置【超详细】

打开cmd&＃xff0c;检测配置是否完成&＃xff0c;输入 node -v / npm -v&＃xff1a;

这样说明配置成功

&＃xff08;3&＃xff09;安装 vue-cli 脚手架工具

npm install -g vue-cli


这个命令只需要运行一次&＃xff0c;安装上之后&＃xff0c;以后就不用安装了。

&＃xff08;4&＃xff09;用脚手架搭项目

先新建一个空文件夹&＃xff0c;我这里叫demo&＃xff0c;放在D盘下面
打开cmd&＃xff0c;cd 进入到这个项目目录之下

然后运行下面的创建语句&＃xff1a;

vue init webpack-simple demo(你的项目名字)
或
vue init webpack demo(你的项目名字)


两者区别
vue init webpack-simple &＃xff1a;轻巧配置&＃xff0c;没有多余的配置和包&＃xff0c;但能保证项目正常运行。
vue init webpack &＃xff1a;完整配置&＃xff0c;包含比较多配置和包。

运行该命令后跳出选项的解释&＃xff1a;

• Generate project in current directory? &＃xff08;是否在当前目录下创建&＃xff09;
  Yes

• Project name (vue项目实例) Demo &＃xff08;项目名称&＃xff09;
  默认这个项目名就直接回车

• Project description A sipmle vue project &＃xff08;项目描述&＃xff09;
  直接回车

• Author &＃xff08;作者&＃xff09;
  直接回车

• Runtime &＃43; Compiler: recommended for most users&＃xff08;运行加编译&＃xff09;
  直接回车

• Install vue-router? (Y/n) &＃xff08;是否安装路由&＃xff09;
  Y

• Use ESLint to lint your code? (Y/n) &＃xff08;是否使用ESLint管理代码&＃xff0c;ESLint是个代码风格管理工具&＃xff0c;是用来统一代码风格的&＃xff0c;并不会影响整体的运行&＃xff0c;这也是为了多人协作&＃xff0c;新手就不用了&＃xff0c;一般项目中都会使用&＃xff09;
  Y

• Pick an ESLint preset &＃xff08;选择一个ESLint预设&＃xff0c;编写vue项目时的代码风格&＃xff0c;因为选择了使用ESLint&＃xff09;
  (Use arrow keys)

• Setup unit tests with Karma &＃43; Mocha? (Y/n)&＃xff08;是否安装单元测试&＃xff09;
  N

• Setup e2e tests with Nightwatch(Y/n)?&＃xff08;是否安装e2e测试&＃xff09;
  N

回车后进行相关包的安装&＃xff0c;接下来一个vue项目就建成了

&＃xff08;5&＃xff09;运行vue项目

新建完成后

cd demo //进行项目文件夹npm install //安装node_modules文件夹&＃xff08;该文件里的内容就是之前安装的依赖&＃xff09;npm run dev //运行项目


文件夹目录如下&＃xff1a;

运行成功截图&＃xff1a;