Vue项目环境搭建

Vue项目环境搭建

一、安装node.js

到 官网下载node.js安装包进行安装

二、换源node

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

三、安装vue项目脚手架

脚手架就是类似房子的骨架，我们接下来往里面填钢筋混凝土，那vue的脚手架，接下来往里面填写一些vue的组件数据。

>: cnpm install -g @vue/cli

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

四、Vue项目的创建

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

4）项目启动
npm run serve

五、已有Vue项目搭建本地

1) 除了依赖都复制到文件夹中，然后创建依赖
npm install // 重新安装依赖

六、pycharm创建Vue项目

安装一下vue脚本使得代码高亮，安装完重启pycharm（如果安装过可以跳过）

1) 打开Vue项目
2) pycharm安装Vue插件(vue.js),在settings选项-->plugins中搜索vue.js安装
3) 配置文件

七、Vue项目目录结构分析

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store	
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

7.1 Vue组件(.vue文件)

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

<template>
    <div class="test">
        
    </div>
</template>
<script>
    export default {
        name: "Test"
    }
</script>
<style scoped>

</style>

7.2 全局脚本文件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')
"""render: function (readFn) {
        return readFn(App);
    },
"""