Vue项目一、准备以及初始项目解析

来源：互联网发布：二次型化为矩阵编辑：程序博客网时间：2024/05/22 02:26

准备

–

技术栈

Html+css+javascript
webpack
ES6基本语法
Vue
vue-router 路由
axios 网络请求
Vuex 状态管理
scss css预编译

安装

1、安装vue

npm install vue -g

2、安装vue-cli脚手架

npm install --global vue-cli

项目初始化

1、初始项目

使用vue-cli脚手架工具初始化一个vue项目:

vue init webpack my-objectcd my-bojectnpm installnpm run dev

项目目录如图：

这里写图片描述

build  //最终发布的代码存放的位置config   //配置目录，包括端口号等node_modules  //npm加载的项目依赖模块src  //这里是我们要开发的目录，基本上要做的事情都在这个目录里。static  //静态资源目录，如图片、字体等。package.json //项目配置文件，这个用于控制项目的依赖。使用npm加载依赖时，会按照这个文件里面描述的各个依赖模块的版本进行查找，先查找node_modules目录下是否已存在某个依赖，若不存在再去网络下载，但是不会查找本地缓存中已经下载好的。index.html  //项目的入口static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。.babelrc  // babel语法编译器的编译配置.editorconfig  //编辑器的配置.eslintignore  //忽略语法检查的目录.eslintrc.js  //eslint的配置文件.gitignore   //一些不需要上传的文件或者目录README.md   //项目的描述文件

我们最需要关注的，就是src里面的内容

这里写图片描述

asset  //放置一些图片components  //组件目录，用于放置一些组件router  //路由文件App.vue  //项目入口文件，可以将组件都写在里面main.js  //项目的核心文件

初始文件展示

//index.html<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>sell</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>

//main.js//The Vue build version to load with the `import` command//"(runtime-only or standalone) has been set in webpack.base.conf with an alias."import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

App组件，由三部分构成，<template></template>、<script></script>、<style></style>

//App.vue<template>  <div id="app">    <img src="./assets/logo.png">    <router-view></router-view>  </div></template><script>export default {  name: 'app'}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

//router/index.jsimport Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Hello',      component: Hello    }  ]})

其他一些配置文件的解读

ESLint配置

ESLint 是一个开源的 JavaScript 代码检查工具。ESLint 的所有规则都被设计成可插入的，也就是可配置。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

下面是自动生成的.eslintrc.js文件的原样，我们可以根据项目的需求或是自我习惯对它进行配置。

更多ESlint规则

// http://eslint.org/docs/user-guide/configuringmodule.exports = {  root: true,  parser: 'babel-eslint',  parserOptions: {    sourceType: 'module'  },  env: {    browser: true,  },  // https://github.com/standard/standard/blob/master/docs/RULES-en.md  extends: 'standard',  // required to lint *.vue files  plugins: [    'html'  ],  // add your custom rules here  'rules': {    // allow paren-less arrow functions    'arrow-parens': 0,    // allow async-await    'generator-star-spacing': 0,    // allow debugger during development    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0    //更多规则...  }}

注：在配置文件发生更改后，都需要重新进行编译。

package.json

{//项目基本信息  "name": "test",  "version": "1.0.0",  "description": "A Vue.js project",  "author": "tuzhu008 <449654337@qq.com>",  "private": true,  "scripts": {    "dev": "node build/dev-server.js",    "start": "node build/dev-server.js",    "build": "node build/build.js",    "e2e": "node test/e2e/runner.js",    "test": "npm run e2e",    "lint": "eslint --ext .js,.vue src test/e2e/specs"  },  "dependencies": {//依赖，开发者需要的部分放在这个位置，键值对的json数据，值中^代表最低版本    "vue": "^2.4.2",    "vue-router": "^2.7.0"  },  "devDependencies": {//开发环境依赖    "autoprefixer": "^7.1.2",    "babel-core": "^6.22.1",    "babel-eslint": "^7.1.1",    "babel-loader": "^7.1.1",    "babel-plugin-transform-runtime": "^6.22.0",    "babel-preset-env": "^1.3.2",    "babel-preset-stage-2": "^6.22.0",    "babel-register": "^6.22.0",    "chalk": "^2.0.1",    "connect-history-api-fallback": "^1.3.0",    "copy-webpack-plugin": "^4.0.1",    "css-loader": "^0.28.0",    "cssnano": "^3.10.0",    "eslint": "^3.19.0",    "eslint-friendly-formatter": "^3.0.0",    "eslint-loader": "^1.7.1",    "eslint-plugin-html": "^3.0.0",    "eslint-config-standard": "^6.2.1",    "eslint-plugin-promise": "^3.4.0",    "eslint-plugin-standard": "^2.0.1",    "eventsource-polyfill": "^0.9.6",    "express": "^4.14.1",    "extract-text-webpack-plugin": "^2.0.0",    "file-loader": "^0.11.1",    "friendly-errors-webpack-plugin": "^1.1.3",    "html-webpack-plugin": "^2.28.0",    "http-proxy-middleware": "^0.17.3",    "webpack-bundle-analyzer": "^2.2.1",    "chromedriver": "^2.27.2",    "cross-spawn": "^5.0.1",    "nightwatch": "^0.9.12",    "selenium-server": "^3.0.1",    "semver": "^5.3.0",    "shelljs": "^0.7.6",    "opn": "^5.1.0",    "optimize-css-assets-webpack-plugin": "^2.0.0",    "ora": "^1.2.0",    "rimraf": "^2.6.0",    "url-loader": "^0.5.8",    "vue-loader": "^13.0.4",    "vue-style-loader": "^3.0.1",    "vue-template-compiler": "^2.4.2",    "webpack": "^2.6.1",    "webpack-dev-middleware": "^1.10.0",    "webpack-hot-middleware": "^2.18.0",    "webpack-merge": "^4.1.0"  },  "engines": {//引擎为node    "node": ">= 4.0.0",    "npm": ">= 3.0.0"  },  "browserslist": [//浏览器    "> 1%",    "last 2 versions",    "not ie <= 8"  ]}

当开发者在项目中需要用到更多依赖时，有两种方法：

修改package.json文件来指定这些依赖，然后通过npm install这个指令来更新依赖。项目已经加载的依赖不会再下载，只会下载新添加进配置文件的部分。
采用命令行的方式加载依赖，并将其写入配置文件。例如npm install vuex --save-dev。这里使用命令行加载了一个vuex,并将其写入了package.json中 "vuex": "^2.4.0"。--save-dev的作用是将载入的依赖的信息写入配置文件，如果不写，在本地的版本中项目是可以正常运作的，因为依赖已经下载到了node_modules文件夹中，但是上传的时候这个文件夹是被忽略的，所以在其他的环境下使用npm install进行加载的时候不会加载到这个依赖，因此项目不能正常的运行。

这两种方法的区别在于写入package.json的位置，我们通常把自己所需的依赖写在dependencies中，当然也可以写在devDependencies中。而使用命令行的方式加载的依赖的信息时钟都会写在devDependencies中

Vue项目一、准备以及初始项目解析

准备

安装

1、安装vue

2、安装vue-cli脚手架

项目初始化

1、初始项目

二级标题

三级标题

四级标题

Vue项目 一、准备以及初始项目解析

准备

安装

1、安装vue

2、安装vue-cli脚手架

项目初始化

1、初始项目

二级标题

三级标题

四级标题

Vue项目一、准备以及初始项目解析