安装脚手架
在使用vue脚手架之前,我们要先全局安装vue脚手架,可以使用下列任一命令安装这个新的包
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确:
vue --version
创建项目
[1]Powershell窗口或cmd小黑窗,执行命令
vue create 项目名
[2]会出现以下选择
若是选择常用的保留选项或默认创建,项目目录就直接创建完成了。
[3]若是进行手动选择,会出现下列选项可供选择项
*代表选中,若是想切换有没有选中—使用 空格
切换
- babel: 处理js兼容性问题->将高版本js编译为浏览器能够识别的低版本js;
- Router: vue-router路由;
- Vuex:共享数据管理;
- CSS Pre-processors:使用 css 预处理器;
- Linter / Formatter:代码检查方式
[4]Use history mode for router? —是否选择history的路由
注:路由方式分为两种,一种是history路由另一种是hash路由;
------区别:hash与history模式的区别;
------(目前)使用hash路由----history路由需要后台进行一定的配置;
[5]若是选择了css预处理器,则会出现以下选择
- Sass/SCSS (with dart-sass)
- Sass/SCSS (with node-sass)
- Less
- Stylus
[6]若是选择了Eslint,会出现以下选择
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config(常用)
- ESLint + Prettier
[7]Pick additional lint features—选择什么时候进行eslint检查
[8]Where do you prefer placing config for Babel, ESLint, etc.?—将以上选择的插件的文件信息放在哪里
- In dedicated config files
- In package.json(常用)
然后等待就安装完成了。
注意点
- 项目名称不能使用中文,英文大写;
- 安装项目的时候,尽量放在非中文目录下;
- 若是网络不好,卡住了–按一次的 ctrl+c,表示我要下载【加速】;
- 两次ctrl+c表示终止运行;
项目目录
1.node_modules:第三方包管理;、
存放在node_modules中的包,导入时不需要写路径,直接写包名即可(原因:只要是存在在这个包中,vue能够自动识别);
2.pubic:存放网站图标和首页html;
3.src:项目代码写在这里
[1]assets:存放静态资源(图片,css等);
[2]compontents:存放公共组件(多个页面都需要使用的组件);
[3]App.vue—主组件(一个项目只有一个主组件—最大的父组件)
[4]main.js—入口文件
注:webpack打包的时候,默认是从main.js入口文件开始打包的;如果没有导入到入口文件中,脚手架并不知道该文件地存在会导致文件被忽略(导入到其他已经导入到main.js的文件也可以–局部导入);
4.gitignore:忽略git文件夹;(也就是说在里面写的文件夹,项目在上传到仓库时,不上传该文件;eg:node_modules);
5.babel.config.js—babel的配置文件
6.package-lock.json:存放导入包的下载信息;
注:在删除了node_modules时,仅需在项目根目录右击终端打开,输入明令npm i即可恢复;原因:package-lock.json存放了以前下载过的包的地址;
7.package.json:存放下载包的版本信息
注:dependencies属性中存放的是:上线还要使用的包
devDependencies属性存放的是:开发中使用的包