用vue cli脚手架搭建vue

àì夳堔傛蜴生んèń 2024-04-17 17:08 80阅读 0赞

### 用vue cli脚手架搭建vue ###

*   *  安装node
     *  安装脚手架vue cli
     *  脚手架搭建项目
     *  搭建完成,运行

## 安装node ##

这里用npm安装，安装node，node官网下载

**https://nodejs.org/en/**

打开cmd或者Git Bash，输入npm -v，查看安装版本，当出现版本号，则说明安装成功。  
![输入npm -v，查看安装版本，当出现版本号，则说明安装成功][npm -v]

## 安装脚手架vue cli ##

输入`npm install vue-cli -g` ；g表示global全局安装，安装完成后，输入`vue -V`查看是否下载

成功，出现版本号则说明安装成功  
![输入vue -V查看是否下载成功，出现版本号则说明安装成功][vue -V]

## 脚手架搭建项目 ##

输入

vue init webpack myproject

语法

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

**template-name**：表示模板名称，vue-cli官方为我们提供了5种模板，

*  **webpack**\-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
 *  **webpack-simple**\-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
 *  **browserify**\-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
 *  **browserify-simple**\-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
 *  **simple**\-一个最简单的单页应用模板。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70]  
    在搭建项目中会有几个问题，需要配置一下
 *  **Project name** :项目名称 注意：这里不能使用大写
 *  **Project description**:项目描述，默认为A Vue.js project,直接回车，不用编写。
 *  **Author**：作者，如果你有配置git的作者，他会读取。
 *  **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。

这里就选择npm安装 然后等待下载。。。。

实际开发中根据需要配置。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 1]  
项目已经搭建完成，可以看到我们的文件夹下面出现了很多文件了。下面根据他的提示让我们进入我们的项目目录

## 搭建完成,运行 ##

移动到项目文件夹下

cd myproject/

然后启动服务

npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 3]  
运行成功，在浏览器上输入http://localhost:8080，可以看到我们的项目已经启动，运行。脚手架搭建vue项目搭建成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 4]

[npm -v]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3640d2eb7d754eae89d9ee7af65f46d3.png
[vue -V]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f678cffb43e34db2894988b00b57844d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/09b97d351f804d2393a94c61f920355e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4b02ed292a66452ab9935682cd11be55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6f0b76253c0444b18c4273639531f148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ee3fc2341e084396a05e4020c5e18643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ubHlfY2hlbmc_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d6cb3494794146fc9ffe0c24bdb662cc.png