从0创建Vue项目

先保证安装了Node.js，下载地址https://nodejs.org/zh-cn/

一般都是按照官网，通过Vue-Cli来创建项目，但是为了一点一点地学习Vue，因此自己从0开始创建，以下是初始化项目目录

dist      // 发布目录
public    // 公共资源目录
src      // Vue项目的源代码目录
|--- api    // 接口目录
|--- components    // VUE组件目录
|--- router   // VUE路由目录
|--- views    // 视图目录
|--- App.vue    // 主程序文件
|--- main.js      // 主脚本文件
babel.config.js      // babel配置文件
package.json       // 依赖包文件

1、创建package.json

{
  "name": "hiver",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "description": "",
  "author": {
    "name": ""
  },
  "dependencies": {
    "axios": "0.18.1",
    "babel-eslint": "^10.1.0",
    "echarts": "4.2.1",
    "element-ui": "2.13.2",
    "js-beautify": "1.10.2",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "4.2.0",
    "vue": "2.6.10",
    "vue-router": "3.0.2",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "node-sass": "4.14.1",
    "sass-loader": "8.0.2",
    "vue-template-compiler": "2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2、创建babel.config.js文件

module.exports = {
  presets: [
    '@vue/app'
  ]
};

3、安装相关依赖
进入到根目录下，在命令行中输入

npm install --registry=https://registry.npm.taobao.org

其中包含几个常用指令
npm run build指令用于编译源代码
npm run serve指令用于即时预览

4、创建Vue.app

5、创建main.js

import Vue from 'vue';

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css'
import Element from 'element-ui'

import App from './App'
import router from './router'

Vue.use(Element, {
    size: Cookies.get('size') || 'medium'
})

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

6、创建路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRoutes = [
    {
        path: '',
        component: (resolve) => require(['@/views/index'], resolve),
        hidden: true
    },
    {
        path: '/detail/:detailId(\\d+)',
        component: (resolve) => require(['@/views/detail'], resolve),
    }
]

export default new Router({
    mode: 'history', 
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

7、创建index.html

    
    
    
    
    
    
    


    

        

            

            

            

            
正在加载系统资源，请耐心等待
        
    

8、创建Index.vue

9、创建detail.vue

这样一来一个简单的vue项目就创建成功了，剩下的就需要去https://cn.vuejs.org/index.html一点一点学习了。