vue项目介绍

vue项目介绍

init 与 create

vue init是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。
示例:vue init webpack myproject
cli2的项目详解:https://www.cnblogs.com/yanxulan/p/8978732.html
vue create是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。
示例:
在项目文件夹中输入命令vue create myproject
详情见:https://www.jianshu.com/p/5e13bc2eb97c
vue-cli3启动服务自动打开浏览器配置 (原文链接:https://blog.csdn.net/Hello_yihao/article/details/86518598)
1.首先创建一个vue-cli3项目。
2.找到package.json文件
3.找到配置项‘scripts’
4.找到配置项‘serve’
5.修改下,加个字段 “serve”: “vue-cli-service serve --open”
 
迁移:vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行配置)

构建项目

vue init webpack hello
vue create hello

目录结构

|vue-proj
|	|node_modules  项目依赖
|	|public
|	|	| 图标、单页面.html
|	|src
|	|	|assets  静态文件(img、css、js)
|	|	|components	 小组件
|	|	|views  页面组件
|	|	|App.vue  根组件
|	|	|main.js  主脚本文件
|	|	|router.js  安装vue-router插件的脚本文件 - 配置路由的
|	|	|store.js  安装vuex插件的脚本文件 - 全局仓库 - 数据共享
|	|配置文件们
|	|README.md  关键命令说明

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

// 2.x
new Vue({
  el: '#app',
  router: router,
  render (fn) {return fn(App)}
})
// 3.x
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router(路由)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/index'

Vue.use(VueRouter);

const routes = [
  {path:'/', component:Index, name:'主页'}
];

export default new VueRouter({
  routes
});

模块

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: ''
})

模块导入报错–报错信息**

 You are using the runtime-only build of Vue where the template compiler is not available.

解决:vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js'
      }
    }
  }
}

vue-插槽

<!-- 模板 -->
Vue.component('navigation-link', {
  template: `
  
    
slot
`
})

 Your Profile

                    

你可能感兴趣的:(vue)