VUE搭建开发，以及打包。

1.全局安装vue

 

 

新建文件夹
全局安装 vue-cli
npm install --global vue-cli
在这个文件夹基础上就可以创建vue项目了、
之后再想创建vue项目就直接在这个文件夹进行下面的步骤。
创建一个基于 webpack 模板的新项目
vue init webpack my-project
安装依赖，走你
cd my-project
npm install
npm run dev 

 

3.搭建目录环境

1.src文件下基本几个目录：

1.1 components(组件文件)。

1.2 views（页面文件）。

1.3 router（路由文件）。

1.4 js（js文件（main.js）(fontSize.js)等等）；

1.5 store（vuex文件）

1.6 css（文件）。

1.7 scss（文件）。

1.8 image（文件）。

 

3.1.index.html页面需要一个挂载元素。

同时可以引入css文件或者js文件。

<div id="App"></div>

3.2.main.js（接口）

主要的作用就是引入外部文件以及创建vue实例化。(除了views文件中的页面不需要在main中引入，他们是在路由中引入的。)

"./"表示当前路径。“../”表示上一层。
import Vue from 'vue'；//引入vue.js
import "../css/index.css";//也可以这样写import css from "../css/index.css" //引入外部文件
import router from "../router/router.js"//引入router路由
import Vuex from "../store/index.js"//引入Vuex。
import App from "../components/App.vue"
import store from "../store/index.js" //vuex

new Vue({
　　el:"App",    //挂载元素
　　template:<App/>,  //模板<App></App>
　　components:{App}  //组件App
　　router,     //注册路由
　　store      //注册vuex。
})

 

3.3. components（文件）

创建App.vue（最大的组件）。

引入注意三个地方，1.标签要写对，2.想引入什么就import，3.引入之后记得注册，components。4使用了路由的话，就应该在模板标签写<router-view></router-view>

<template>
         <div id="App">

　　　　　　<headerbao></headerbao>//(重点)

　　　　　　<router-view> //（重点）
　　　　　　　　//直接默认为首页。看你路由的路径配置。
　　　　　　</router-view>
　　　　　　
　　　　　</div>

</template>

<script>
import headerbao from "../components/header.vue" //引入头部组件。（重点）

export defalut{        //引入(重点)
      name:"App",
　　　 components:{    //注册组件
　　　　　　headerbao,
　　　}　　　　
      data:function(){
          return{
             abc:123
         }
       },
      methods:{//to do someting}
}

</script> 

<style lang="scss">


</style>   

其他组件同上即可。

3.4.views（文件）；

这里面等于页面文件，等于都会放进路由里面。

1.例如index.vue(首页)

<template>
        <div id="index">
             <headerbao></headerbao>  //引入到标签
        </div>

</template>


<script>
    import headerbao from "../components/header.vue" //引入头部组件
    export defalut{
        name:"index",
        data:function(){
             return{//}
        },
        components:{    //注册组件
            headerbao ,
        }
    }

</script>

<style lang="scss">


</style>  

3.5.路由

1.打开my_project文件，cmd

npm install vue-router

2.成功以后，就创建目录（第一步有说基本目录）router/router.js

3.在main.js中

import router from "../router/router.js"

new Vue({
   el:"#App",
   router,   //记得注册路由
  ....
})

4.打开router.js文件，记得一定要引入vue和路由库。

 

import Vue from "vue"; //一定要引入vue
improt router from "vue-router"; //一定要引入路由库
import Index from "../views/index.vue";
import Newsfrom "../views/news.vue";
import LinesRouters from "./LinesRouter.js"//线路页面路由
import MyRouters from "./CenterRouter.js"//我的页面路由
import MyOrderRouters from "./MyOrderRouter.js"//我的订单页面路由

Vue.use(router)  //使用路由

const routeHome = [
　　{
　　　　path:'/', //当前路径(是给默认首页的路径index.vue文件)
　　　　component:login, //组件对应view的index.vue
　　　　name:"login" //给个对应的名字比较好，不给也可以。
　　},
　　{
　　　　path:'/Home/Index',
　　　　component:Index,
　　　　name:"Index"
　　},
]

var routes = routeHome.concat(LinesRouters,MyRouters,MyOrderRouters);
var route = new router({
// mode: 'history',
routes, //配置路由,

});

//判断登陆状态

route.beforeEach((to, from, next) => {
　　//to:前往路径
　　//from:前路径
　　getJSON("Manage/FlowManage/NoHandNotice/IsLogin",{},function(res){
　　　　if(res.data.message=='1'){ //登陆状态
　　　　if(to.name=="login"){ //如果是登录页
　　　　route.push({name: 'Index',path:'Home/Index'});//跳转首页
　　　　}
　　}else{ //未登录状态
　　　　route.push({name: 'login',path:'/'});//跳转登录页
　　}
　　},function(err){
　　　　console.log(err)
　　})
　　next();
})
export default route;

3.6.css文件

1.可以直接引入到index.html

首先创建好scss文件目录，然后开启编译，scss --watch scss：css    然后再创建一个公共的common.scss，方便我调用方法。

（这样子做虽然方便，但是千万要注意命名冲突问题。毕竟一个页面可能会有很多组件。）

2.可以直接在组件下写。

3.暂时不明白为什么scss不能多人svn项目，运行项目会报错。

3.7 打包build

1.路径问题：进入config/index.js：
module.exports={
    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
       assetsSubDirectory: 'static',
        assetsPublicPath: '/', /* 将此处修改成 ./*/
    }
}
2.仍然出现空白问题：进入router/index.js:
var route = new router({
    //mode: 'history',//将history模式注释即可
    routes, //配置路由,

})

 3.8关于将vue的项目代码放到svn或者git时node_modules的处理方式

　　　　1.尽量不要将node_modules放进svn或者git中，因为拉去时间长，而且用处不大，因为我们再生成node_modules时，或者安装插件时，都会在webpack.json文件中生成。

　　　　2.所以我们只要将webpack.json文件放进svn(git)中就行。

　　　　3.我们在拉取代码时，再在本地中下载node_modules,它会根据webpack.json的内容生成相应的模块。所以不必担心，之前其他同事安装的内容消失掉。

转载于:https://www.cnblogs.com/MJ-MY/p/8045067.html