通过npm安装vue脚手架
准备工作
-
安装node.js node.js中集成npm 下载地址:node下载连接
-
下载好后可以通过cmd命令查看是否安装成功
-
安装cnpm(可选)
由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们也可以使用npm的国内镜像——cnpm(淘宝npm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装脚手架
-
Vue-cli 2.0和之后版本命令不同,若之前安装过2.0可以先卸载
npm uninstall -g vue-cli
-
安装vue-cli
npm install –g @vue/cli
-
查看版本
安装成功之后可以通过cmd命令查看安装的vue脚手架的版本号
创建项目
-
切换到指定目录
-
创建项目
-
配置项目
是上下进项选择,回车进行确认
-
选择需要配置项目
配置项说明:
( ) Babel//转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试 -
选择Vue版本
-
选择ESLint代码校验规则
-
选择如何存放位置
In dedicated config files // 独立文件放置
In package.json // 放package.json里 -
是否存储当前配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQJrclvv-1658815734006)(https://s2.loli.net/2022/07/26/9fiNS28MJWRHyOK.png)] -
创建项目
-
启动项目
切换目录——运行服务
-
终止Vue项目
连续按两次ctrl+c 或者 将命令行窗口关闭
打开项目后项目的结构
项目结构说明:
-
1node_modules:用于存放项目中各种依赖包
-
public:用于存放静态资源
-
- index.html:生成项目的入口文件
- src:Vue的源代码文件
-
- assets:用于存放着各种静态文件,比如图片
-
- components:应用程序的组件
-
- App.vue:应用程序根组件
-
- main.js:入口文件,主要作用是初始化 vue 实例
- 其他:配置文件
-
- eslintrc.js: eslint代码检查的相关配置放到这里。
-
- .gitignore:配置git上传想要忽略的文件格式。
-
- babel.config.js:是一个工具链,主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容(低版本ES)。
-
- package.json:模块基本信息项目开发所需要的模块,版本,项目名称
-
- package-lock.json:是在npm install时候生成的一份文件,用于记录当前状态下实际安装的各个npm package的具体来源和版本号
- public文件目录和src/assets目录区别
-
- public一般不用动,在vue-cli在进行build的时候,public下面的文件会原封不动的添加到dist中,不会被合并、压缩;不会被webpack打包工具所处理。
来源和版本号
- public文件目录和src/assets目录区别
-
- public一般不用动,在vue-cli在进行build的时候,public下面的文件会原封不动的添加到dist中,不会被合并、压缩;不会被webpack打包工具所处理。
-
- src/assets目录,build之后,assets目录中的文件,会被合并到一个文件中,然后进行压缩。多用来存放业务级的js、css等。