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 dev //别忘记将绝对路径改为相对路径  到项目目录下的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标签

猜你喜欢

转载自blog.csdn.net/qq_38674970/article/details/81061095