搭建vue项目以及vue目录介绍

搭建vue项目

一、安装node

1、下载地址
http://nodejs.cn/download/
2、检查是否安装成功及版本
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

命令 node -v 和 npm -v

二、搭建vue项目

1、全局安装vue-cli，命令 npm install --global vue-cli

2、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

• Project name： 项目名称
• Project description： 项目描述
• Author： 作者
• Vue build： 打包方式（回车默认就行）
• Install vue-router：是否选择路由（因为项目会用到路由，选择y）
• Use ESLint to lint your code： 是否使用eslint校验代码（个人习惯使用eslint，所以选择y）
• Pick an ESLint preset： 选择校验风格（回车默认即可）
• Set up unit tests： 是否安装单元测试工具（目前不需要）
• Setup e2e tests with Nightwatch： 是否需要端到端测试工具（目前我们也不需要）
• Should we run npm install for you after the project has been created? (recommended)： 项目创建后要不要安装npm（我平时用npm多一些，所以选择npm，但yarn更快一些）

3、启动项目，命令： npm run dev

三、vue项目目录介绍

1、build：构建脚本目录

• build.js： 生产环境构建脚本
• check-versions.js： 检查版本信息（node、npm）
• utils.js： 构建相关工具方法
• vue-loader.conf.js： 配置了css加载器以及编译css之后自动添加前缀
• webpack.base.conf.js： wabpack基础配置
• webpack.dev.conf.js： wabpack开发环境配置
• webpack.prod.conf.js：wabpack生产环境配置

2、config： 项目配置

• dev.env.js： 开发环境变量
• index.js： 项目配置文件
• prod.env.js： 生产环境变量

3、node_modules： 依赖
4、src： 源码目录

• assets： 资源目录，这里的资源会被wabpack构建，放图片，css，less，js文件
• components： 公共组件目录，可以把组件放在这里
• router： 前端路由，需要配置的路由路径写在index.js中
• App.vue： 根组件
• main.js： 入口js文件

5、static： 纯静态资源，不会被wabpack构建。比如字体，图标等。
6、.browserslistrc： 设置浏览器的兼容
对于部分配置参数做一些解释:

• " >1%" :代表着全球超过1%人使用的浏览器
• “last 2 versions” : 表示所有浏览器兼容到最后两个版本
• “not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
• “safari >=7”:表示safari浏览器版本大于等于7

7、.editorconfig： 配置编码规范

• charset：文件编码。可选值
• indent_style: 缩进类型。可选值
• indent_size: 缩进数量。可选值

8、.eslintrc.js： eslint配置文件

• //规则值
  "off"或者0 //关闭规则关闭
  "warn"或者1 //在打开的规则作为警告（不影响退出代码）
  "error"或者2 //把规则作为一个错误（退出代码触发时为1）
• //常见规则列表
  “no-alert”: 0,//禁止使用alert confirm prompt
  “no-array-constructor”: 2,//禁止使用数组构造器
  “no-bitwise”: 0,//禁止使用按位运算符
  “no-caller”: 1,//禁止使用arguments.caller或arguments.callee
  “no-class-assign”: 2,//禁止给类赋值
  “no-cond-assign”: 2,//禁止在条件表达式中使用赋值语句
  “no-console”: 2,//禁止使用console
  。。。

9、.gitignore： 用来忽略被指定的文件或文件夹的改动
10、.postcssrc.js： css编译工具
11、index.html： 首页入口文件，可以添加一些 meta 信息等
12、package-lock.json： 描述 node_modules 文件中所有模块的版本信息，模块来源及依赖的小版本信息以及更新依赖版本
13、package.json： npm包配置文件，定义了项目的npm脚本，依赖包等信息
14、README.md： 项目的说明文档，markdown 格式

到这一步，项目已经搭建好了，接下来在相应文件夹下面新增文件，写入代码就可以了。