vue 脚手架简单安装流程
-
首先是环境的安装：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
能够显示版本号，说明环境已经安装好了。
-
下面就是全局安装 Vue 中脚手架工具：vue-cil
输入命令：npm install -g vue-cli
等待安装完毕即可。
-
下面就用这个脚手架搭建一个建议的 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 项目就建立完成。
项目文件结构如下图：
-
最后，我们运行一下该项目：
进入到项目目录，命令窗口内输入命令：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
最终结果如下：
到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。
