环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli </p>项目创建:#vue create demo + $cd demo + $yarn serve + $vue ui </p> 项目结构 ├── node_modules # 项目依赖包目录 ├── public │ ├── favicon.ico # ico图标 │ └── index.html # 首页模板 ├── src │ ├── assets # 样式图片目录 │ ├── components # 组件目录 │ ├── views # 页面目录 │ ├── App.vue # 父组件 │ ├── main.js # 入口文件 │ ├── router.js # 路由配置文件 │ └── store.js # vuex状态管理文件 ├── .gitignore # git忽略文件 ├── .postcssrc.js # postcss配置文件 ├── babel.config.js # babel配置文件 ├── package.json # 包管理文件 └── yarn.lock # yarn依赖信息文件(1)Vue CLI 3 提供图形化界面,提供插件,Vue CLI有几个独立的部分组成: CLI是一个全局安装的npm包,提供终端的Vue命令. CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令. CLI插件是向你的Vue项目提供可选的功能的npm包. (1)起步 起步: $yarn global add@vue/cli $vue create vuecli $vue ui (1)-1:快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global (1)-2:vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue (1)-3:vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue (2)插件和Preset (2)-1:每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件 $vue add @vue/eslint (2)-2:Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们. (3)CLI服务: (1)vue-cli-service serve –open 在浏览器启动时打开浏览器 (2)vue-cli-service serve –copy 在浏览器启东时讲URL复制到剪切板 (3)vue-cli-service serve –mode 指定环境模式(默认值development) (4)vue-cli-service serve –host 指定host (5)vue-cli-service build –mode 指定环境模式 (2) Vue Devtools