如何搭建一个vue项目

妖狐艹你老母 2021-07-25 21:57 541阅读 0赞

## 一、安装node环境 ##

**1、下载地址为：**  
[https://nodejs.org/en/][https_nodejs.org_en]

**2、检查是否安装成功：**  
输入以下命令，正确输出版本号说明成功：  
node -v  
npm -v  
![在这里插入图片描述][20191212161146926.png]

## 二．搭建vue项目环境 ##

**1、全局安装vue-cli,命令行中输入以下命令：**

npm install --global vue-cli

**2、进入项目目录，创建一个基于 webpack 模板的新项目**  
（1）cd 项目目录  
![在这里插入图片描述][20191212161304597.png]

（2）使用vue init 命令初始化项目：

vue init <template-name> <project-name>

`init` : 表示用vue-cli来初始化项目  
`<template-name>` : 模板名称，开发中一般都会使用webpack模板。  
`<project-name>` ：项目名称，可以根据自己的项目来起名字。

![在这里插入图片描述][20191212162333712.png]  
输入命令后，进入项目选项，根据需要进行填写：  
![在这里插入图片描述][2019121216261318.png]

*  Project name :项目名称 。
 *  Project description:项目描述，默认为A Vue.js project,直接回车
 *  Author：作者，如果有配置git的作者，将会读取。
 *  Vue build ： 打包方式，回车即可；
 *  Install vue-router? 是否安装vue的路由插件，选择Y
 *  Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。这里不需要输入n，如果是大型团队开发，最好进行配置。
 *  setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，这里不需要，所以输入n。
 *  Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，这里不需要，所以输入n。
 *  Should we run `npm install` for you after the project has been created?项目创建后，我们是否应该为您运行“npm install”？根据自己需要进行选择，这里用的是npm，直接回车。

![在这里插入图片描述][20191212162937682.png]  
命令页面出现上面的文字，说明项目已经初始化完成。

*  `cd element-demo`：进入vue项目目录。
 *  `npm run dev`：运行程序。

[https_nodejs.org_en]: https://nodejs.org/en/
[20191212161146926.png]: /images/20210725/4d8cc8e1f2474bf8ac0ce54ede67fcb9.png
[20191212161304597.png]: /images/20210725/4e355fe9427b4b37b450aa9d64eb6eb9.png
[20191212162333712.png]: /images/20210725/15ce58cee0c44b7296f62796cf6d5e34.png
[2019121216261318.png]: /images/20210725/48d05339b4cc4b849815611c55f31f82.png
[20191212162937682.png]: /images/20210725/7da586cf4f0a406c94d7beda009c22bd.png