Vue新手指南之创建第一个vue-cli脚手架程序

下面是完整的攻略。

准备工作

在开始创建vue-cli脚手架程序之前，需要确保已经安装了以下几个工具：

• Node.js：Vue框架基于Node.js运行，因此需要先安装Node.js（建议安装LTS版本）
• npm：Node.js自带的包管理工具，也是Vue框架所依赖的包管理工具。一般情况下，安装Node.js之后npm也会一并安装。

创建项目

1. 第一步，打开命令行工具（Windows下为cmd，Mac OS/Linux下为Terminal），输入如下命令安装vue-cli：

npm install -g vue-cli

1. 第二步，我们可以使用vue init来创建一个基于webpack模板的Vue.js项目：

vue init webpack my-project

上述命令中：

• webpack表示我们要使用webpack模板创建Vue项目。

• my-project是我们要创建的项目名称，可以根据实际情况修改。

• 然后你会被要求输入一些信息，例如项目名称、作者等。按照提示输入即可。

• 最后在项目目录下运行npm install来安装项目所需的依赖。

cd my-project
npm install

运行项目

完成上述步骤之后，我们就可以运行项目了! 在项目目录下运行如下命令：

npm run dev

这条命令会启动一个本地服务器，并在浏览器中显示项目的运行结果。

示例说明

下面就通过两个示例进行说明：

示例1

我们创建一个名为vue-demo的项目，并使用默认配置。

1. 打开命令行工具，输入如下命令安装vue-cli：

npm install -g vue-cli

1. 创建名为vue-demo的项目：

vue init webpack vue-demo

在命令行中输入的其他信息，可以按照默认方式设置。

1. 进入项目目录，并安装依赖：

cd vue-demo
npm install

1. 启动项目：

npm run dev

1. 此时在浏览器中输入http://localhost:8080即可访问vue-demo项目。

示例2

我们创建一个名为my-vue-project的项目，并使用ESLint来提高代码质量。

1. 打开命令行工具，输入如下命令安装vue-cli：

npm install -g vue-cli

1. 创建名为my-vue-project的项目，并使用ESLint：

vue init webpack my-vue-project

在命令行中输入的其他信息，可以按照默认方式设置。

1. 进入项目目录，并安装依赖：

cd my-vue-project
npm install

1. 安装ESLint相关插件：

npm install --save-dev eslint eslint-loader eslint-plugin-vue

1. 在项目的根目录下创建.eslintrc.js文件，输入如下代码：

module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

1. 修改webpack的配置文件，添加ESLint相关loader，修改webpack.base.conf.js文件，修改代码如下：

module.exports = {
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, 'src')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
// ...
]
},
// ...
}

1. 启动项目：

npm run dev

此时可以看到在控制台中会有ESLint检查的结果信息，用于帮助开发者优化代码质量。

以上就是创建Vue.js项目的完整攻略。