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 "[email protected]/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 // 局部，定义时:只有当前文件应用样式，否则为全局样式
**************************************** 未完待续 ***********************************
原文地址：https://www.cnblogs.com/xingxingnbsp/p/12202520.html