第六节:Vue-cli

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>

定义组件

联系管理员微信tutu19192010,注册账号

上一篇
下一篇
Copyright © 2022 Egon的技术星球 egonlin.com 版权所有 帮助IT小伙伴学到真正的技术