Vue 项目创建

Vue项目创建

一、    环境搭建

             本文档主要针对Windows系统Node.js下使用Vue-cli和webpack工具，搭建Vue开发环境。

              开发工具：Visual Studio Code.

1. 安装Node.js：

a)       下载安装包：https://nodejs.org/en/

b)      配置自定义的全局模块安装目录

　　　　在node.js安装目录（D:\nodejs\）下新建两个文件夹：

  　　　　node_global和node_cache

　　　　然后在cmd命令下执行如下两个命令：

　　　　npm config set prefix "D: \nodejs\node_global"

　　　　npm config set cache "D: \nodejs\node_cache"

c)       环境变量配置

                                        i.           系统变量

	变量名	值
新增	NODE_PATH	D:\nodejs\node_modules
追加	Path	D: \nodejs\node_global

                                       ii.           用户变量

	变量名	值
追加	Path	D: \nodejs\node_global

 

　　　安装Webpack(全局安装)

　　　　　　命令： npm install webpack -g

　　　安装vue-cli(全局安装)

　　　　　　命令：npm install @vue/cli -g

　　　测试命令：vue  --version 

 

二、    项目创建

1. 初始化项目

命令：vue init webpack projectname 

1. 安装iview等插件（文件夹安装，局部安装）

a)       命令：npm install iview

1.  

三、    开发环境配置

参考: https://www.jianshu.com/p/dc2bb003ebe0

Config文件夹下配置：

 

Dev.env.js测试环境配置

      

Prod.env.js生产环境配置

       添加或者修改API_ROOT：‘“正式API目录”，默认为“./”’

Index.js 程序配置：    

       Dev:测试环境配置

              Host：开发服务器ip，默认为localhost

              Port: 开发服务器监听的特定端口

              proxyTable：定义开发服务器的代理规则，一般用来配置api地址

       Build:生产环境配置

              Index: 发布后本地index.html的路径

              assetsRoot：所有静态资源的根目录：文件、图片等。一般为static

              assetsSubDirectory：存放编译文件的目录

              assetsPublicPath：资源发布后的路径（url路径）

                     可以为“/”或者“./”

四、    系统测试和发布

测试：

       命令：npm run dev

      

发布：

命令：npm run build 

将程序打包到dist文件夹下，复制dist文件夹下的所有文件 到IIS目录下即可