1. 安装
webpack和
vue-cli
首先需要在本地安装
webpack和
vue-cli，可以通过以下命令进行安装：
```
npm install
webpack -g
npm install
vue-cli -g
```
2. 创建
项目
使用vue-cli可以快速创建一个
vue项目，执行以下命令：
```
vue init
webpack my-project
```
其中my-project是
项目名，可以自定义。执行命令后会提示输入一些选项，比如
项目描述、作者等信息。最后会自动生成一个
项目目录。
3. 安装依赖
在
项目目录下执行以下命令安装依赖：
```
cd my-project
npm install
```
4. 配置
webpack
在
项目目录中找到
webpack.config.js文件，这个文件是
webpack的配置文件，可以在其中进行配置。一般情况下，我们需要配置入口文件、输出文件、加载器和插件等。以下是一个示例配置：
```
const path = require('path')
const Html
WebpackPlugin = require('html-
webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.
vue$/,
loader: '
vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new Html
WebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
],
resolve: {
alias: {
'
vue$': '
vue/dist/
vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
```
5. 编写组件
在src目录下新建一个App.
vue文件，用于编写组件：
```
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello
Vue!'
}
}
}
</script>
```
6. 编写入口文件
在src目录下新建一个main.js文件，用于编写入口文件：
```
import
Vue from '
vue'
import App from './App.
vue'
new
Vue({
el: '#app',
render: h => h(App)
})
```
7. 运行
项目
在命令行中执行以下命令
启动开发服务器：
```
npm run dev
```
然后在浏览器中访问http://localhost:8080，可以看到页面上显示了“Hello
Vue!”。至此，一个基本的
vue项目已经成功
搭建完成了。
本文记录了在Mac系统中使用npm和vue初始化构建Vue项目的完整流程，包括查看npm和node版本，卸载并重新安装webpack及webpack-cli，创建Vue项目时可能遇到的权限问题以及解决方法，最后通过npm install和npm start启动项目。
最低0.47元/天 解锁文章
5115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
