1. 第一节安装及创建项目

1.1 安装nodejs

　　https://nodejs.org/en/download/ 　　(根据自己的电脑系统选择下载版本)
　下载完成点击【Next】一直到【install】

　　node -v 查看是否安装完成

　　>> v12.14.1　　表示安装成功

　　npm -v 查看npm是否安装成功

　　>> 6.13.6　　表示安装成功

1.2 安装vue脚手架

　　npm install -g @vue/cli （等待安装完成）
　　vue -V 查看版本

　　>> @vue/cli 4.1.2　　表示安装成功

1.3 安装淘宝镜像cnpm
　　npm install -g cnpm --registry=https://registry.npm.taobao.org
　　cnpm -v
　　>> [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
　　>> [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
　　>> [email protected] (D:\huanjing\nodejs\node.exe)
　　>> [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
　　>> prefix=C:\Users\Administrator\AppData\Roaming\npm
　　>> win32 x64 10.0.18363
　　>> registry=https://r.npm.taobao.org

1.4 建立项目仓库（Github|Coding）
　　(1) Github: http://www.github.com/
　　(2) Coding: https://coding.net/
　　(3) 安装git命令行工具 https://blog.csdn.net/qq_32786873/article/details/80570783

1.5 GIT 常用命令
　　(1) 拷贝项目：git clone <仓库地址>
　　(2) 创建分支：git branch <name>
　　(3) 创建并进入分支：git checkout -b <name>
　　(4) 切分支：git checkout <name>
　　(4) 查看状态：git status
　　(5) 添加所有文件：git add
　　(6) 提交：git comment -m <当前提交的描述>
　　(7) 拉取：git pull
　　(8) 推送：git push
　　git push --set-upstream origin dev
　　(9) 查看分支 git branch --list
　　(10) 查看分支(包含远程分支)：git branch -a
　　(11) git clone [email protected]:XXXXXX/XXXX.git
　　***
　　问题：[email protected]: Permission denied (publickey).
　　解决：
　　ssh-keygen -t rsa -C "你的邮箱名"

　　生成秘钥文件
　　***

1.6 创建项目
　　(1) vue create vue-admin
　　(2) 选第一个回车
　　(3) 选第二个回车
　　(4) 选[1,4,5,6,7] 回车
　　(5) Y表示路由以后会带# ，N表示路由路由以后不带# (http://www.abc.com/#/hello)
　　(6) 选第二个
　　(7) 选第四个
　　(8) 选第一个
　　(9) n

1.7 启动项目

　　cd vue-admin
　　npm run serve

　　大功告成！！！

2. 第二节(vue.config.js,全局配置,elementui组件)

2.1 创建配置文件
　　(1) 在项目根目录创建 vue.congig.js 文件
　　配置手册：https://cli.vuejs.org/zh/config/#css-extract

　　(2) 创建normalize.scss

　　(3) 安装 element 组件
　　　　npm i element-ui -S

　　(4) 导入组件
　　在根目录下的 main.js 中写入以下内容：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 新增
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false;
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

　　(5) 配置全局样式
　　在根目录下的 vue.config.js 中写入以下内容：

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，    baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
　　/* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
　　publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
　　/* 输出文件目录：在npm run build时，生成文件的目录名称 */
　　outputDir: 'dist',
　　/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
　　assetsDir: "assets",
　　/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
　　productionSourceMap: false,
　　/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
　　filenameHashing: false,
　　/* 代码保存时进行eslint检测 */
　　lintOnSave: true,
　　/* webpack-dev-server 相关配置 */

　　devServer: {
　　　　/* 自动打开浏览器 */
　　　　open: false,
　　　　/* 设置为0.0.0.0则所有的地址均能访问 */
　　　　host: '0.0.0.0',
　　　　port: 8080,
　　　　https: false,
　　　　hotOnly: false,
　　},

　　// 配置样式
　　css: {
　　　　loaderOptions: {
　　　　　　sass: {
　　　　　　　　prependData: `@import "~@/styles/main.scss";`
　　　　　　}
　　　　}
　　}
}

2.2 路由
　　(1) 重定向路由

redirect: "login"

　　(2) 路由配置
　　在 src/router/index.js 中写入以下内容：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
　　{
　　　　path: "/",
　　　　redirect: "login"
　　},
　　{
　　　　path: "/login",
　　　　name: "login",
　　　　component: () => import("../views/pages/Login.vue")
　　}
];
const router = new VueRouter({
　　routes
});
export default router;

3. 第三节(vue文件标准结构，v-for遍历,key,v-binb属性,@click属性,绑定class,基础数据类型,引用数据类型区别)
3.1 vue 文件标准结构
　　(1) 固定的3块内容:
　　template,script,style
　　(2) template
　　必须有一层父元素，否则会报错，元素不一定是div标签，其他的也可以
　　(3) script

<script>
export default {
　　name: "login", // 当前元素名称
　　components: {}, // 组件，有引入组件时，放置组件名称，
　　data() { // 数据，v-model绑定数据使用
　　　　return {};
　　},
　　created() {}, // 创建完成时（生命周期其中一个）
　　mounted() {}, // 挂载完成时（生命周期其中一个）
　　methods: {}, // 定义函数
　　props: {}, // 子组件接收父组件参数
　　watch: {} // 子组件接收父组件参数
};
</script>

　　(4) style

<style lang="scss" scoped>
</style>

　　lang="scss" // 定义类型
　　scoped // 局部，定义时:只有当前文件应用样式，否则为全局样式

**************************************** 未完待续 ***********************************

vue 从0开始

1. 第一节安装及创建项目

1.1 安装nodejs

1.2 安装vue脚手架

2. 第二节(vue.config.js,全局配置,elementui组件)

猜你喜欢