Vue-CLI 项目搭建

1 单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html#ad

2 Vue-CLI 项目搭建

2.1 环境搭建

- 安装node
 
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
 
- 安装cnpm
 
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
- 安装脚手架
 
cnpm install -g @vue/cli
 
- 清空缓存处理
 
npm cache clean --force

				

					
				
				

					
				
				

					
				
				

					
				
			

2.2 项目的创建

创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
//标准eslint，自动修复（ESlint+Standard config--》lint on save+Lint and fix on commit）
vue ui 使用图形界面创建项目

				

					
				
				

					
				
				

					
				
				

					
				
			

启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

				

					
				
				

					
				
				

					
				
				

					
				
			

打包项目

npm run build
// 要在项目根目录下进行打包操作

				

					
				
				

					
				
				

					
				
				

					
				
			

package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 运行项目
    "build": "vue-cli-service build",  # 编译项目成html，css，js
    "lint": "vue-cli-service lint"     # 代码格式化
},

				

					
				
				

					
				
				

					
				
				

					
				
			

2.3 认识项目

项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
    --favicon.ico
    --index.html:项目入口页面，单页面
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）

				

					
				
				

					
				
				

					
				
				

					
				
			

配置文件：vue.config.js

//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做

				

					
				
				

					
				
				

					
				
				

					
				
			

main.js 整个项目入口文件

//es6 模块导入规范，等同于python导包
//commonJs的导入规范：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根组件
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
 
/*
new Vue({
    el:'#app' //原来是用el:'#app'，现在是new出Vue对象，挂载到#app上---》.$mount('#app')
  render: h => h(App) //原来是在页面上div中写样式，现在组件化开发 把根组件（import App from './App.vue'），通过render渲染上，渲染组件的方式
}).$mount('#app')
*/

				

					
				
				

					
				
				

					
				
				

					
				
			

vue文件

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    //export default-->es6的默认导出（导出一个对象），模拟commonJS的导出方式制定的
    export default {
 
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

定义组件