使用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>
