vue 脚手架简单安装流程

vue 脚手架简单安装流程

1. 首先是环境的安装：node.js
   安装成功后，在命令框输入命令即可检验：

user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue脚手架搭建/helloWorld
$ node -v
v10.16.0

user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue脚手架搭建/helloWorld
$ npm -v
6.9.0

能够显示版本号，说明环境已经安装好了。

2. 下面就是全局安装 Vue 中脚手架工具：vue-cil
   输入命令：npm install -g vue-cli
   等待安装完毕即可。
3. 下面就用这个脚手架搭建一个建议的 vue 项目

user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue脚手架搭建/helloWorld
$ vue init webpack demoProject

? Project name (demoProject) hellovue
? Project name hellovue
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (user <XXXXXXX@qq.com>)
? Author user <XXXXXXX@qq.com>
? Vue build (Use arrow keys)
? Vue build runtime
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) yarn

   vue-cli · Generated "demoProject".


# Installing project dependencies ...
# ========================

'yarn' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒

# Project initialization finished!
# ========================

To get started:

  cd demoProject
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

001.JPG

4. 最后，我们运行一下该项目：
   进入到项目目录，命令窗口内输入命令：npm install
   安装项目文件用到的依赖。
   安装完毕后，项目目录会出现一个"node_modules"文件夹，里面存放的就是依赖文件。然后再运行命令：npm run dev

user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue脚手架搭建/helloWorld/demoProject
$ npm run dev

> hellovue@1.0.0 dev E:\MarkNote\Vue\vue脚手架搭建\helloWorld\demoProject
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 1 1 1 12% building modules 21/27 modules 6 active ...搭建\helloWorld\demoProject\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 1 1 95% emitting DONE  Compiled successfully in 2443ms2:35:47 PM

 I  Your application is running here: http://localhost:8080

按照提示，打开浏览器输入地址：http://localhost:8080
最终结果如下：

002.JPG

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。