Vue学习记录三 --- vue的项目实战

一、常规项目配置安装：

1、安装vue-router路由：

cmd下在当前项目目录下执行 ：

npm install vue-router --save-dev

如果因为依赖安装失败，则执行 ：

npm install --legacy-peer-deps vue-router --save-dev

如果后续出现版本冲突问题，可以降低版本。

2、安装vue-axios:

cmd下在当前项目目录下执行：

npm install --save axios vue-axios

3、安装element-ui：

cmd下在当前项目目录下执行：

npm i element-ui -S

4、安装sass加载器:

cmd下在当前项目目录下执行：

cnpm install sass-loader node-sass --save-dev

切记版本不要选太高，可以指定版本安装，亲测4.0.0最稳定。

5、将所有安装部署到项目中：

cmd下在当前项目目录下执行：

npm install

6、启动测试：

cmd下在当前项目目录下执行：

npm run dev

二、项目实例：

1、项目结构：

说明：

• assets：用于存放资源文件
• components：用于存放Vue功能组件
• views：用于存放Vue视图组件
• router：用于存放vue-router配置

 2、创建组件：

• 在views目录下创建Login.vue组件:（此为element-ui实例，可以自己去官网找模板）

• 在views目录下创建Main.vue组件:

•  在router目录下创建一个名为index.js的vue-route路由配置文件:

  //导入vue
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  //使用
  Vue.use(VueRouter);
  //导出
  export default new VueRouter({
  })
  

          vue-router为之前安装的模块，这里进行导入，然后还要安装路由Vue.use()即可使用，还需要暴露路由，让其他组件也能使用，则要最后那段。

          将我们之前写两个组件导入，并设置其访问路径与组件。

  //导入vue
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  //导入组件
  import Main from "../views/Main";
  import Login from "../views/Login";
  //使用
  Vue.use(VueRouter);
  //导出
  export default new VueRouter({
      routes: [
      {
        //登录页
        path: '/main',
        component: Main
      },
      //首页
      {
        path: '/login',
        component: Login
      },
    ]
  })
  

•  在main.js中配置路由:

  import Vue from 'vue'
  import App from './App'
  import router from "./router"
  
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  Vue.config.productionTip = false
  
  Vue.use(router)
  Vue.use(ElementUI)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    render:h=>h(App)
  })
  
  

  导入element-ui使其生效。

•  编写APP.vue:

  app组件中里来显示子组件的视图。

• 测试： 

   在控制台当前项目下输入:

npm run dev

 结果测试成功：

•  在views目录下创建一个目录user，并新建两个组件，一个为List.vue，一个为Profile.vue:

• 在views目录下创建一个组件名为Main.vue与NotFound.vue，这个组件采用了element-ui的模板结构: 

• 在index.js中导入这几个组件路由： 

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Content from "../components/Content";
  import Main1 from "../components/Main";
  import Login from "../views/Login"
  import Main2 from "../views/Main";
  import UserList from "../views/user/List";
  import UserProfile from "../views/user/Profile";
  import NotFound from "../views/NotFound";
  
  //安装路由
  Vue.use(VueRouter)
  
  //配置导出路由
  export default new VueRouter({
    //让地址栏不出现#号
    mode: 'history',
    routes: [
      {
        //路由路径 相当于@RequestMapping
        path: '/content',
        name: 'Content',
        //跳转的组件
        component: Content
      },
      {
        //路由路径
        path: '/main1',
        name: 'Main',
        //跳转的组件
        component: Main1
      },
      {
        //路由路径
        path: '/login',
        name: 'Login',
        //跳转的组件
        component: Login,
      },
      {
        path: '/main2/:username',
        name: 'Main2',
        component: Main2,
        //子组件（嵌套组件）
        children: [
          {
            path: '/user/profile/:id',
            component: UserProfile
          },
          {
            path: '/user/list',
            component: UserList
          }
        ]
      },
      {
        path : '/goHome',
        //重定向
        redirect: '/main2'
      },
      {
        path: '*',
        component: NotFound
      }
    ]
  })
  

•  进行测试：

 

 其中还有参数传递与钩子函数，实现起来比较简单 ，这里便不一一介绍了，vue基础快速学习结束，之后结合项目去完善更多的高级vue使用，对于后端开发人员来说，学到入门了解即可，也可深入学习慢慢向全栈工程师发展。