vue安装，webstorm工程搭建

系统管理员 2022-10-02 11:45 292阅读 0赞

**一、Vue基础介绍：**

1)是一套构建用户界面的渐进式框架。

2)只关注视图层， 采用自底向上增量开发的设计。

3)的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

**二、安装过程：**

1、安装node.js，这里不再赘述，安装后npm也自动伴随安装

查看安装结果：

node -v

npm -v

![20190618150301322.png][]

2、安装cnmp，安装后cnpm代替npm来安装依赖包(原理上来说，cnpm做的事情，就是给大家换了个registry，就是说，库文件的源头改到了国内)，这里用淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70][]

3、安装webpack

打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功

![20190625173023142.png][]

4、全局安装脚手架工具vue-cli

打开命令行工具输入：npm install --global vue-cli，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

![20190625173127673.png][]

**三、webstorm创建vue工程**

1、 webstorm直接下载安装，步骤简单省略，自定义工程目录，下一步即可

![20190618151000853.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 1][]

2、初始化项目

1）进入终端命令行窗口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 2][]

目录结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 3][]

2）初始化项目：

cnpm install

![20190618154145556.png][]

3、运行项目：

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 4][]

4、浏览器验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 5][]

5、项目目录结构说明

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 6][]

总结：概括以下步骤

使用vue webpack 模板搭建项目步骤：

1. 安装 node.js(npm)，因为会用到npm包管理工具下载项目依赖等

2. 安装 webpack: npm install webpack -g

3. 安装 vue-cli： npm install vue-cli –g

4. 通过vue-cli，初始化vue项目： vue init webpack projectName(项目名)

5. 进入到项目目录： cd projectName(项目名)

6. 安装项目依赖： npm install

7. 启动项目： npm run dev

[20190618150301322.png]: /images/20220112/ca49bd4ec6ca45a18d2bb8d482091b9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20220112/4087ebe3334c40a5a341ffa94a695fbd.png
[20190625173023142.png]: /images/20220112/77248a1a99d14723b29e761d968fed3a.png
[20190625173127673.png]: /images/20220112/428ebe6d07cd479ca63dbeab1b0d5ec3.png
[20190618151000853.png]: /images/20220112/91526b6ac6a24cc89f7f7998c0681ad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 1]: /images/20220112/7f39aeecd5c9454db5e12be925993193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 2]: /images/20220112/b3804aa957b84822932636bb7e7ed8c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 3]: /images/20220112/dc7dcc9a8f1a4447ad3b456b801718ae.png
[20190618154145556.png]: /images/20220112/be5fbd7860d84cea8cde72b850c16bb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 4]: /images/20220112/2c1c8b23faff49858add6f73f5c9daf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 5]: /images/20220112/d327ff4f0cc74f0bb388906cc54f6780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70 6]: /images/20220112/5fc9f23ac4f6474cb081a8775b7af5fa.png