头条项目步骤

项目创建

找到要创建项目的文件夹，打开cmd，输入“vue create 项目名”创建

 按上下键切换，空格键选择

1.Vue2（自定义项目

2.Babel、Router、Vuex、CSS Pre-processors

3.选择vue版本，选2.x

4.选择路由模式,选择hash模式(hash:网址上带#，hhistory：网址上无#，正式上线需要服务支持)

5.选择css预处理，选择less

6.问配置的插件模块是放在哪里，选择独立一个文件还是全部放到 package.json，选择第一个

7.自定义配置要不要保存起来方便以后使用

8.成功创建之后，输入“cd+项目名”进入项目，“npm run serve”运行项目

项目文件删除

删掉 views 文件夹里两个默认提供的组件

删掉 router 里对组件的导入和默认的路由规则，最终只留以下代码

删掉 App.vue里的默认代码，只留基本结构

删掉 components里默认的 HelloWorld.vue文件

删掉 assets里的 logo.png，store里只留学过的state和 mutations

基本全局样式

在src新建styles文件夹，放入base.less文件，用于写全局样式，main.js导入样式

vant组件

1.下载:npm i vant@latest-v2 -S

2.自动按需导入：npm i babel-plugin-import -D，并配置相关代码

3.在main.js导入插件，app.vue使用

4.在src新建utils文件夹，放一个vant.js，用于放入vant的代码,再在main.js导入

axios

1.下载axios：npm i axios

2.在src/utils里新建request.js，导入axios和设置基地址和暴露出去

移动端适配

知识点

1.下载flexible.js插件:npm i -S amfe-flexible

2.在main.js导入：import 'amfe-flexible'

屏幕适配

1.下载：amfe-flexible，在main.js导入

postcss-pxtorem

1.下载：npm install postcss postcss-pxtorem --save-dev

2.在src新建postcss.config.js文件，放入基本的PostCSS示例配置

登陆页面

登录组件以及添加路由

1.views里新建Login文件夹，在里面新建index.vue页面，在router导入

2.在App.vue写路由出