标签：表示 缓存 page mil ros 默认 报错 路由 Fix
https://nodejs.org/en/download/ (根据自己的电脑系统选择下载版本)
下载完成点击【Next】一直到【install】
node -v 查看是否安装完成
>> v12.14.1 表示安装成功
npm -v 查看npm是否安装成功
>> 6.13.6 表示安装成功
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
>> cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
>> npm@6.13.6 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
>> node@12.14.1 (D:\huanjing\nodejs\node.exe)
>> npminstall@3.27.0 (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 git@github.com:XXXXXX/XXXX.git
***
问题 ：git@github.com: 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.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 // 局部，定义时:只有当前文件应用样式，否则为全局样式
**************************************** 未完待续 ***********************************
标签：表示 缓存 page mil ros 默认 报错 路由 Fix
原文地址：https://www.cnblogs.com/xingxingnbsp/p/12202520.html
