前端学习之Vue项目搭建

Posted 2020-11-23 xuchengnotes

目录

• 一、Vue项目环境搭建
• 二、Vue项目创建
• 三、pycharm配置并启动vue项目
• 四、认识项目
• 五、vue组件(.vue文件)
• 六、全局脚本文件main.js（项目入口）

一、Vue项目环境搭建

node ~~ python：node是用c++编写用来运行js代码的

npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm

vue ~~ django：vue是用来搭建vue前端项目的

• 安装node

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

• 换源安装cnpm

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

• 安装vue项目脚手架

>: cnpm install -g @vue/cli

• 清空缓存处理

注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force

二、Vue项目创建

• 创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

• 项目初始化

• 启动/停止项目

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

• 打包项目

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

三、pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

四、认识项目

• 项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

• 配置文件：vue.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做

五、vue组件(.vue文件)

# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

<template>
    <!-- 模板区域 -->
</template>

<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        
    }
</script>

<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

六、全局脚本文件main.js（项目入口）

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

改写

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});