1、使用vue-cli创建项目
参考:
https://www.npmjs.com/package/vue-cli
https://github.com/vuejs/vue-cli/tree/master
https://www.jianshu.com/p/1626b8643676
https://segmentfault.com/a/1190000011275993
步骤:
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
图示1:
C:\workspace\webstorm2017-3.2\myvue>npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\libingshen\AppData\Roaming\npm\vue -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\libingshen\AppData\Roaming\npm\vue-list -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\libingshen\AppData\Roaming\npm\vue-init -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 236 packages in 74.142s
C:\workspace\webstorm2017-3.2\myvue>vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
C:\workspace\webstorm2017-3.2\myvue>vue init webpack vue_demo
? Project name vue_demo
? Project description A Vue.js project
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 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) no
vue-cli · Generated "vue_demo".
# Project initialization finished!
# ========================
To get started:
cd vue_demo
npm install (or if using yarn: yarn)
npm run lint -- --fix (or for yarn: yarn run lint --fix)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
C:\workspace\webstorm2017-3.2\myvue>cd vue_demo
C:\workspace\webstorm2017-3.2\myvue\vue_demo>npm install
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
> uglifyjs-webpack-plugin@0.4.6 postinstall C:\workspace\webstorm2017-3.2\myvue\vue_demo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1240 packages in 131.222s
C:\workspace\webstorm2017-3.2\myvue\vue_demo>npm run lint -- --fix
> vue_demo@1.0.0 lint C:\workspace\webstorm2017-3.2\myvue\vue_demo
> eslint --ext .js,.vue src "--fix"
C:\workspace\webstorm2017-3.2\myvue\vue_demo> npm run dev
> vue_demo@1.0.0 dev C:\workspace\webstorm2017-3.2\myvue\vue_demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 4389ms 19:49:59
I Your application is running here: http://localhost:8080 终止批处理操作吗(Y/N)? y
C:\workspace\webstorm2017-3.2\myvue\vue_demo>
2、模板项目结构
图2:
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件