vue 初始化

安装node.js 傻瓜式 

安装完毕看版本信息: node -v;

安装cnpm：  npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cil : cnpm install -g vue-cli 

创建项目：vue init webpack firstVue  //firstVue 是名字

写名字啥的：除了必要的其他选no 不然会验证

安装依赖包 ：进入文件夹 cnpm install

运行项目：npm run dev

打包项目：npm run build//别忘记将绝对路径改为相对路径  到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了

//一套基本的就完成了

//vue 模块使用

<firstcomponent></firstcomponent> //模块显示

import firstcomponent from './component/first.vue' //引用模块

export default {
  name: 'App',
  data () {
  return {
  msg:"this is you new vue App"
  }
  },
  components:{firstcomponent}                   //载入模块

}

 

 

//vue路由使用 

//安装路由。在创建项目时会询问

<router-link to="/b">Go to Foo</router-link><!--路由跳转-->
<router-link to="/c">Go to Bar</router-link><!--路由跳转-->

<router-view></router-view><!--路由显示-->

//页面显示结束

import FindBack from '@/component/first'  

import AboutUs from '@/component/second'

export default new Router({
  routes: [
    {
      path: '/b',
      name: 'FindBack',
      component: FindBack
    },
    {
      path: '/c',
      name: 'AboutUs',
      component: AboutUs
    },
  ]

})

//放入router下的index.js

new Vue({
  el: '#app',
  router,     //放置路由
  components: { App },
  template:   '<App/>'

})

//在main的js里放置路由

//路由结束。。别忘记在main.js和index.js里引用路由。。一般是自动配置好的

//安装sass

cnpm install --save-dev sass-loader//sass-loader依赖于node-sass

cnpm install --save-dev node-sass

// 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{

    test: /\.sass$/,

    loaders: ['style', 'css', 'sass']

}

<style lang="scss"> //修改style标签

 

//方法的使用

    methods:{
                        say: function (message) {
                                            console.log(jsonStr);
                                            console.log(token);
                                                        
                                            $.ajax({
                                            type: "post",
                                            url:  'http://ap.jvjiewang.com/Seller/Login/dologin',
                                            data: {
                                                jsonStr:jsonStr,
                                                token:token
                                            },
                                            datatype: "json",
                                                success: function (data) {
                                                if(data.status){
                                                    console.log(data);
                                                }else{
                                                    alert(data.message);
                                                         }
                                                },
                                            error:function(){
                                                alert("数据请求失败");
                                            }
                                            });
                                }    
                        },

//js

 <button @click="say('hi')">点我显示样式</button>  //html