工程化之创建vue项目

【一】 创建vue项目

• 要按vue要求的套路写代码--》写的都是vue的东西
• 最终上线--》要编译---》把vue的代码--》编译成 html，css，js
• 创建工程，编译需要使用：nodejs--》webpack

【二】Vue-CLI 项目搭建

【1】 环境搭建

- 安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

- 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

 ### 解决方案1：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 关闭SSL验证
    npm config set strict-ssl false
    // 3. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

    ### 解决方案2：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 切换新源
    npm config set registry https://registry.npmmirror.com
    // 3. 查看源是否设置成功
    npm config get registry
    // 4. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

- 安装脚手架

cnpm install -g @vue/cli


- 清空缓存处理

npm cache clean --force

【2】 项目的创建

【1】创建项目

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

【2】启动/停止项目

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

【3】打包项目

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

【4】项目目录

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）

【5】配置文件：vue.config.js

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

【6】 vue项目y运行机制

//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')

【7】组件写法

<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button @click="handShow">点击按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  methods: {
    handShow () {
      alert('111')
    }
  }
}

</script>

<style>
button{
  background-color: aquamarine;
}
</style>