初始化vue项目及更改目录结构

原文地址

使用vue-cli初始化项目

• 运行初始化命令：$ vue init webpack project_name生成初始化目录

##这些选项没用，推荐不安装
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No

修改初始化目录结构

##修改目录文件如下

│  .babelrc
│  .editorconfig
│  .gitignore
│  .postcssrc.js
│  index.html                ---项目入口文件
│  package-lock.json
│  package.json             ---打包文件
│  README.md
│  
├─build
│      build.js
│      check-versions.js
│      logo.png
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      
├─node_modules                ---npm安装模块
│                  
├─src
│  │  App.vue
│  │  main.js                ---项目主文件
│  │  
│  ├─assets                    ---静态文件文件夹
│  │      logo.png
│  │      
│  ├─components
│  │      HelloWorld.vue    ---项目模板文件
│  │      
│  ├─routes                    ---路由控制文件夹
│  │      index.js            ---控制路由文件
│  │      
│  └─style
│      │  style.scss        ---样式文件
│      └─scss                ---样式文件夹
└─static

• 在routes/index.js中添加如下代码：

import HelloWorld from '@/components/HelloWorld'
export default [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]

• 修改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 'vue-router'
Vue.use(Router)
import routes from './routes'
// 设置路由规则
const router = new Router({
    routes
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

最后运行项目：
npm run dev
访问首页http://localhost:8080，看到vue初始化页面说明配置成功

引入scss样式文件

安装sass-loader：
npm install sass-loader -d
安装node-sass：
npm install node-sass -d
在src/App.vue中引入样式文件

<style lang="scss">
  @import "./style/style";
</style>