Original:
Build Vue development environment + IIS under windows
Special note: any of the following commands are entered under the Windows command line tool, and the shortcut to open the command line tool is as follows:
The detailed installation steps are as follows:
1. Install node.js
Note: After installing the windows version of node.js, node and the package management tool npm will be automatically installed, and our subsequent installation will depend on the npm tool.
The official address of node.js is:
https://nodejs.org/en/download/
, as shown in the following figure:
According to the specific configuration of your computer, select the installation package you want to download. The author chose windows 64bit.
After the download is complete, according to the general application of Windows, you can install it successfully all the way to next. It is recommended not to install it on the system disk (such as C:).
Second, set the global and cache paths
Description: Setting the path can centralize the modules installed through npm for easy management.
1. In the installation directory of nodejs, create two new folders, node_global and node_cache. The author's installation directory is "D:\Program Files\nodejs\"
2. Set global and cache
npm config set prefix "D:\Program Files\nodejs\node_global"
and
npm config set cache "D:\Program Files\nodejs\node_cache"
After the setup is successful, the modules will be in D:\Program Files\nodejs\node_global\node_modules after installation with the command npm install XXX -g
3. Install cnpm
Note: Since many npm packages are abroad, we use Taobao's mirror server here to install the modules we depend on, so first install "China's npm" - cnpm
The reference website is as follows:
http://npm.taobao.org/
The installation command is:
npm install -g cnpm --registry=https://registry.npm.taobao.org
Fourth, set environment variables (very important)
Description: Setting environment variables allows commands such as cnpm and vue to be used in any directory without entering the full path.
1. Right-click "This PC", select the "Properties" menu, select "Advanced System Settings" on the left in the pop-up "System" dialog box, and the "System Properties" dialog box will pop up.
2. Click Environment Variables to pop up the following dialog box:
3. Modify the system variable PATH:
Select PATH, click Edit, add English ";" after the existing variable, and then add "D:\Program Files\nodejs\node_global" to the back
4. New system variable NODE_PATH:
Click New in the following system variables, the next box will pop up, and set the variable value to "D:\Program Files\nodejs\node_global\node_modules"
4. Install vue with cnpm
cnpm install vue -g
Five, install the vue command line tool
cnpm install vue-cli -g
6. Create a project
1. Use the cd command to go to the directory where you will create a new project, such as "C:\Users\Administrator\Desktop\birdhelper>"
Create a new project based on the webpack template named birdhelper.
1、vue init webpack mytest，具体步骤如下图所示：
2、初始化完成后的目录结构如下：
3、定位到mytest的工程目录下
cd mytest
4、安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules
cnpm install
5、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。
cnpm run dev
6、有时我们的服务器并不一定是node，也许是IIS，这样我们就需要把工程构建出来，与IIS集成。
构建该项目的命令如下
cnpm run build
将dist文件夹拷贝出来，放到IIS的发布目录，在浏览器中输入IIS设置的本机ip和端口进行访问即可。Good Luck, guys！
至此，我们已经在win10下搭建成功了vue，并能和iis服务器进行集成。为.net框架开发web应用带来了棒棒的vue。