Vue-cli 3.0 构建项目（一）构建初始项目 蔚落 2022-05-21 05:36 190阅读 0赞 * 1. 环境配置 * 2. 初始化项目 * 默认配置 * 自定义配置 * 自定义细节配置 官方文档 [https://cli.vuejs.org/][https_cli.vuejs.org] # 1. 环境配置 # * 安装 Vue-cli `3.0` 脚手架工具 * 终端输入运行 npm install -g @vue/cli * 安装完成后，输入 `vue -V` 查看是否安装成功 ![vue版本][vue] * 新的命令语句 ![这里写图片描述][20180630223641230] # 2. 初始化项目 # * 终端输入运行 vue create <projectName> 与 `2.0` 不同的是这里不再是选择模板，而是预设 `presets` ![这里写图片描述][20180630212309396] ## 默认配置 ## * 选择 \[默认\] 将直接开始安装 ![这里写图片描述][20180630212512527] ## 自定义配置 ## * 选择 \[自定义\] 方向键上下移动，空格选中，Enter确定 ![这里写图片描述][20180630214533983] ![这里写图片描述][20180630215139224] ## 自定义细节配置 ## 1. 是否使用class风格的组件语法 ![这里写图片描述][20180630215412727] 2. 是否使用babel做转义 ![这里写图片描述][20180630215514100] 3. 选择CSS预处理类型 ![这里写图片描述][20180630215712368] 4. 选择语法检测规范 ![这里写图片描述][20180630215831621] 5. 选择 保存时检查 / 提交时检查 ![这里写图片描述][20180630220144146] 6. 选择配置信息存放位置，单独存放或者并入package.json ![这里写图片描述][20180630220342169] 7. 是否保存当前预设，下次构建无需再次配置 ![这里写图片描述][20180630220444266] 完成安装 ![这里写图片描述][20180630222616446] 基本目录结构相对 2.0 精简了不少 ![这里写图片描述][2018063022281268] [https_cli.vuejs.org]: https://cli.vuejs.org/ [vue]: /images/20220521/24c8b199d62247fcb17d89a5b4fef4dd.png [20180630223641230]: /images/20220521/4aaf6c681bb9454bbe2564246215aaea.png [20180630212309396]: /images/20220521/2a6eb9cbfdca453a8a6785a597fc24b5.png [20180630212512527]: /images/20220521/e5b1955fce16403b89ee79961a9d7c76.png [20180630214533983]: /images/20220521/ff4c1eaa4f5445049e6c1ef921fbc44b.png [20180630215139224]: /images/20220521/7e2fbfb4361d4e97b28f156925efc7e3.png [20180630215412727]: /images/20220521/d0b1caac008341e59b6fd8466265ae6f.png [20180630215514100]: /images/20220521/bb34d0878cc44fdca5409bd2d8bdfa12.png [20180630215712368]: /images/20220521/bbbeb5f7a8ab46e79851bf57bdcdf6aa.png [20180630215831621]: /images/20220521/f639ce6bb69642989f72b80214869fb0.png [20180630220144146]: /images/20220521/43044c31ada5467cb4feadc23fa8ff14.png [20180630220342169]: /images/20220521/1145cc462865425186752b866cc4b913.png [20180630220444266]: /images/20220521/d21af3eff484446f84a39eb7866ee889.png [20180630222616446]: /images/20220521/480da7a346cb4bfe97ebd5c1e1d12e35.png [2018063022281268]: /images/20220521/e9a5681105ae47e6b4624b80563e7ca2.png
还没有评论，来说两句吧...