vue2项目记录1写一个项目首先是创建项目工程，要了解各个文件的作用，起步阶段要做的工作有很多，每样也都是必不可少的，所

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

写一个项目首先是创建项目工程，要了解各个文件的作用，起步阶段要做的工作有很多，每样也都是必不可少的，所以做好笔记对于以后创建项目都有很大的帮助和便利。

起步阶段

创建项目

vue create app

基本配置

node+webpack+淘宝镜像

各个文件夹的区别

node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
src：程序员源代码文件夹
assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
components文件夹:一般放置非路由组件（或者项目共用的组件） App.vue 唯一的根组件 main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

项目其他配置

浏览器自动打开：在package.json文件中

"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

关闭eslint校验工具 : 创建vue.config.js文件：需要对外暴露 module.exports = { lintOnSave:false, }
src文件夹的别名的设置：因为项目大的时候src（源代码文件夹）里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些——创建jsconfig.json文件

{ 
"compilerOptions": { 
    "baseUrl": "./", 
    "paths": { 
        "@/": [ "src/" ] 
        } 
    }, 
    "exclude": [ "node_modules", "dist" ] 
}

路由配置

（在这之前我们可以先写好静态页面、静态组件）

首先分析路由，分析好有哪些之后在开始创建文件夹写代码这些

安装路由

此处用的vue2，所以只支持4版本以下的vue-router,代码如下

npm install vue-router@3

我第一遍安装错了，所以需要卸载重装

删除路由 npm uninstall vue-router,然后用正确口令重新装即可

安装后可以在package.json文件当中查看版本号

创建路由组件

一般放在views|pages文件夹

创建非路由组件

步骤：定义，引入，注册，使用
采用less样式，需安装依赖：cnpm install --save less less-loader@6 (注意！不能安装过高版本，一般5、6即可，我用的是6，一定加版本号，不加的话就自动安装最新版本了)。另外，使用less样式记得在style标签身上加上lang="less"