Vue项目 一、准备以及初始项目解析
准备
–
技术栈
- 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-object
cd my-boject
npm install
npm 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
<html>
<head>
<meta charset="utf-8">
<title>selltitle>
head>
<body>
<div id="app">div>
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组件，由三部分构成，、、
//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.js
import 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/configuring
module.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 <[email protected]>",
"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中
二级标题
三级标题
四级标题
注：