文章目录
- 概述
- 安装npm
- 安装vue-cli
- 建立工程
- npm i安装脚手架项目的基本支持包
- npm run dev运行由脚手架构建的基本 Vue.js 程序
- 工程结构
概述
脚手架 vue-cli为我们省去了手工配置开发环境、运行环境和测试环境的步骤，可以让我们直接步入 Vue.js 开发，不过我们需要先搭建下环境，下面开始吧
安装npm
npm（node package manager）node的包管理工具,网上很多教程，这里不赘述了。
安装成功后，验证如下：
安装vue-cli
使用npm i vue-cli -g将 vue-cli 安装到机器的全局环境中
C:Usersyangshangwei>npm i vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:UsersyangshangweiAppDataRoamingnpmvue -> C:UsersyangshangweiAppDataRoamingnpmnode_modulesvue-clibinvue
C:UsersyangshangweiAppDataRoamingnpmvue-init -> C:UsersyangshangweiAppDataRoamingnpmnode_modulesvue-clibinvue-init
C:UsersyangshangweiAppDataRoamingnpmvue-list -> C:UsersyangshangweiAppDataRoamingnpmnode_modulesvue-clibinvue-list
vue-cli@2.9.6
added 239 packages from 206 contributors in 23.127s查看vue的版本
代码语言：javascript复制C:Usersyangshangwei>vue --version
2.9.6建立工程
这里我们用的是webpack-simple模板 ，它拥有基础功能的 webpack vue-loader 用于快速原型开发。
还有一套最常用的是webpack，它拥有高级功能的 webpack vue-loader 用于正式开发：
代码语言：javascript复制vue init webpack-simple vue-todosC:Usersyangshangwei>vue init webpack-simple vue-todos
? Project name vue-todos
? Project description A Vue.js project
? Author yangshangwei <yangshangwei@***.com>
? License MIT
? Use sass? No
vue-cli · Generated "vue-todos".
To get started:
cd vue-todos
npm install
npm run dev输入的问题，直接“回车”跳过就行了
npm i安装脚手架项目的基本支持包
进入项目目录，
代码语言：javascript复制C:Usersyangshangwei>cd vue-todos安装脚手架项目的基本支持包
代码语言：javascript复制C:Usersyangshangweivue-todos>npm i
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> uglifyjs-webpack-plugin@0.4.6 postinstall C:Usersyangshangweivue-todosnode_modulesuglifyjs-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_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 802 packages from 570 contributors in 39.189snpm run dev运行由脚手架构建的基本 Vue.js 程序
代码语言：javascript复制C:Usersyangshangweivue-todos>npm run dev
> vue-todos@1.0.0 dev C:Usersyangshangweivue-todos
> cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html访问 http://localhost:8080/
工程结构
我们导入工程到IDE中，看看 vue-cli 为我们构造了 一个什么样的代码结构
