vue项目搭建与目录介绍_vue中添加用户的页面代码放在components目录下还是在views目录下

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

node.js与npm

在widnows版本中，安装node.js的同时，也会安装npm。但是linux中需要两个软件单独安装

测试是否安装成功

node -v
npm -v
1
2

Node.js是JS具备服务器端功能的一种软件。Node.js基于google的V8引擎。npm是默认与node.js一同安装的包管理工具。用来管理前端项目中所使用的第三方js包。npm的这个功能有点像java中的maven

npm install --save 包名 --registry=https://registry.npm.taobao.org		#使用淘宝镜像下载包
1

npm install 、npm install --save 和 npm install --save-dev的区别：

• 相同点：三者都会本地安装包到项目的node_modules目录中
• 区别：区别在于对项目package.json的修改，npm install不会修改package.json，而后两者会将依赖添加进package.json

在vue-cli中通常使用 npm install --save 包名 --registry=https://registry.npm.taobao.org

VS Code

有关Vue的插件

• vue

• vue 2 Snippets

• Vue VSCode Snippets

Vue的安装

基于npm方式的安装

在使用npm的前提下，可以直接在线安装（也可使用cnpm）

npm install -global vue --registry=https://registry.npm.taobao.org			#vue目前的版本是2.6.11
npm install -global @vue/cli		#vue-cli目前的版本是4.2.3
1
2

解析：

1. -global参数，指的是全局安装。这种安装可以让用户在任何地方使用安装的JS功能组件
   • 如果不添加-global，将会在当前目录下新建一个node_modules目录，并将包安装到node_modules目录下
2. @vue cli是一个基于命令行的vue构建工具，可以很容易使用这个工个来构建SPA项目
3. vue是框架的本体，vue cli是进行vue开发的一种脚手架，提供vue的初始化和各种其他功能

利用Vue cli生成项目框架

vue create 项目名	#在当前目录下创建vue项目
1

生成项目框架时，需要进行一些选择，包括：

第一项：

Please pick a preset: 
选择：Manually select features
1
2

第二项

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing     
1
2
3
4
5
6
7
8
9

第三项

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
选择：Y
1
2

第四项

Pick a CSS pre-processor
选择：Sass/SCSS (with dart-sass)
1
2

第五项

Pick a linter / formatter config
选择：ESLint with error prevention only 
1
2

第六项

Pick additional lint features
选择：Lint and fix on commit
1
2

第七项

Where do you prefer placing config for Babel, ESLint, etc.?
选择：In package.json
1
2

第八项

Save this as a preset for future projects? (y/N)
选择：n
1
2

选择完成后，系统会花大约一分钟的时间完成生成工作

vue-project目录

• node_modules：包文件目录
• public：发布目录
  • index.html ：项目中唯一的页面文件，所有的vue组件最终都在该页面中展示
• src
  • assets：存放静态资源img、css、js等
  • components：组件库，所有的以vue为扩展名的文件都存放在这里
  • router：路由目录，项目添加了vue router后才有该目录
  • store：项目的全局数据中心，项目添加了vuex后才有该目录
  • views：存放各种扩展为.vue的组件，这些组件是页面级的，可以包含components目录中的组件
  • App.vue：vue入口组件文件，初始页面组件，该页面组件被挂载到唯一的index.html文件中
  • main.js：该文件是系统的启动文件。所以和整个项目相关的配置或代码都要在这个文件中编写
• .gitignore：利用git上传时的忽略文件
• babel.config.js：js高级版本改写设置文件
• package-lock.json：包管理文件的锁定版本
• package.json：npm生成的包管理文件
• README.md：github.com中的传统自述文件

添加axios

在项目根目录下使用npm install --save axios --registry=https://registry.npm.taobao.org

在每一个需要使用axios的vue文件的script标签内手动添加import axios from 'axios'

项目启动

启动项目使用：npm run serve

项目结束使用：Crtl + c

其设计原理是：package.json文件中的scripts属性中的一个具体命令，这里就是serve。该命令实际上利用了vue-cli-service，这是vue cli中的代码。实际上最终是使用了node main.js命令来启动项目

这些封装都依托于Webpack进行的。也就是说Webpack是Vue cli的更底层的技术

补充

• Babel：Babel把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境（如浏览器和 node）能够认识并执行
• Router：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
• Vuex： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• CSS Pre-processors：预处理器 pre-processor，比如要用sass或者cssNext就要按照人家规定的语法形式去编写，然后人家把你编写的代码转成css
• Linter / Formatter： 代码风格、格式校验