简述——Vuejs项目思路

一、       搭建项目环境

1.安装vue脚手架

npm install vue-cli -g

2.使用vue-cli初始化项目

cd 项目名称

vue init webpack-simple 项目名称

3.安装项目依赖

cd 项目名称

npm install

4.启动项目

npm run dev

二、   把.html文件转为.vue文件

1.在对html文件进行移植为vue文件时，出了大错误，没有排查出原因，所以将整个环境删除了重新搭建的项目环境。

 

2.将index的html文件成功移植到vue文件中

 

3.将公共的css样式放到main.js中出现了问题（模块化导入时），最开始是因为style-loader不存在,安装用npm install style-loader css-loader –D安装完毕后，然后报错。

 

4.基本的html文件的移植已经算是完成了。但navbar和footbar种的小图标不显示，引入css文件和js文件试过，没有找到原因。很多css样式和js不管是全局引入还是页面单独引入都有错误。

后来将gainseestyle.css引入全局上述问题基本解决。js文件都在index文件中引入。

下图为项目分析：组件安排，创建组件，我完成的是个自适应的pc端项目，

 

src-

 |- assets

  |- 模板对应资源

  |- css

  |- js(jq,swiper)

  |- images

 |- components

  |-navbar.vue / footbar.vue

  |- home.vue / anli.vue   / about.vue / service.vue / contact.vue

  |- anli1.vue

  |- loading

      |- loading.vue

      |- index.js

 |-data

  |- xx .json

  |- xx .data

  |- php / nodejs

 |-filters

  |- date.js / .....

  |- index.js

 |-common

  |-common.js ...

 |- app.vue

 |- main.js

 |- router.config.js

webpack.config.js

index.html

package.json

三、   路由搭建

1.   首先安装路由:npm installvue-router –D,然后在main.js中引入路由:importVueRouter from 'vue-router'

2.   全局 Vue.use(VueRouter)

3.   路由实例const router = newVueRouter({routes});

4.   引入import  routes from './routes.config.js';

5.   在外挂router

new Vue({
  el: '#app',
  render: h => h(App),
    router
})

6.   若在main.js中这样写const router = new VueRouter({routes});，则在routes.config.js这样写：export default routes;

若在main.js中这样写const router = newVueRouter(routes);

则在routes.config.js这样写：exportdefault { routes };

注：通过const router= new VueRouter（）来定义一个路由，并传入对应的配置，包括路径path和组件components。

7.   <router-link></router-link>

<router-view></router-view>

mode:'history' //默认是hash，修改为history 在路径中没有#了，在路由实例中修改。

四、   数据交互

1.安装：npm install axios –D，安装完成后导入import axios from 'axios';绑定到原型Vue.prototype.$http=axios;

创建一个axios实例，

实例的方法

在视图中请求数据，引入axios，请求服务器数据。

五、   状态管理

Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。