码迷,mamicode.com
首页 > 其他好文 > 详细

vue 从0开始

时间:2020-01-16 18:59:07      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:表示   缓存   page   mil   ros   默认   报错   路由   Fix   

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
  >> 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. 第二节(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开始

标签:表示   缓存   page   mil   ros   默认   报错   路由   Fix   

原文地址:https://www.cnblogs.com/xingxingnbsp/p/12202520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!