vue全家桶_vue脚手架

安装脚手架

在使用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属性存放的是:开发中使用的包