使用vue-cli初始化項(xiàng)目
- 運(yùn)行初始化命令：
$ vue init webpack project_name生成初始化目錄
##這些選項(xiàng)沒用，推薦不安裝
? 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
修改初始化目錄結(jié)構(gòu)
##修改目錄文件如下
│ .babelrc
│ .editorconfig
│ .gitignore
│ .postcssrc.js
│ index.html ---項(xiàng)目入口文件
│ 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 ---項(xiàng)目主文件
│ │
│ ├─assets ---靜態(tài)文件文件夾
│ │ logo.png
│ │
│ ├─components
│ │ HelloWorld.vue ---項(xiàng)目模板文件
│ │
│ ├─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'
// 設(shè)置路由規(guī)則
const router = new Router({
routes
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
最后運(yùn)行項(xiàng)目：
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>
