全局安装vue-cli
npm i vue-cli -g
创建项目
vue init webpack-simple vue-todos
进入项目文件夹,项目初始化
cd vue-todos
npm i
运行项目,将会看到默认界面
npm run dev
这里将app.vue中其余内容删除,只保留基本框架
<template>
<!--视图模板-->
<!--注意!从vue2.0开始组件模板必须有且只有一个顶层元素-->
<div id="app">
</div>
</template>
<!--组件定义-->
<script>
export default {
name: 'app'
}
</script>
<!--组件样式表-->
<style>
</style>
这里样式使用less,需进行相关配置
npm i less style-loader css-loader less-loader -D
在webpack.config.js中进行相应配置
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here