vue初使用及安装

╰半橙微兮° 2021-10-18 17:44 336阅读 0赞

# [vue初使用及安装][vue] #

## 一：安装Node.js ##

1.  在Node.js官网https://nodejs.org/en/download/下载安装包。
2.  下载后进行安装。
3.  打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。新版的Node.js已自带npm（类似.net中的nuget包管理器），安装Node.js时会一起安装。（将来要更新npm可用这个命令npm intall npm@latest -g）
4.  配置环境变量（这里就会自动配置好）。
5.  命令行中输入node， 再输入console.log("hello"); 用来验证是否安装成功。
6.  配置npm的全局模块的存放路径和缓存路径，在node.js的安装目录下新建node-cache和node\_global两个文件夹，然后命令行输入：
    
        npm config set prefix "c:\Program Files\nodejs\node_global"
        npm config set cache "c:\Program Files\nodejs\node_cache"
    
    将来用npm install xxx -g 安装以后的模块就在这两个文件夹里。
7.  配置npm的环境变量：系统变量path中新增一个变量：  
    C:\\Program Files\\nodejs\\node\_global\\node\_modules，（node安装在哪就写哪），然后在用户变量中修改变量为C:\\Program Files\\nodejs\\node\_global，最后就可以删掉C:\\Users\\xlz\\AppData\\Roaming下的npm目录了。

## 二：安装cnpm ##

1.  输入命令：**cnpm install**， 完成后在C:\\Program Files\\nodejs\\node\_global\\node\_modules目录下可看到cnpm文件夹和它的文件了。

## 三：安装webpack（js应用程序的静态模块打包器module bundler） ##

1.  输入 **cnpm install webpack -g** 进行安装，如何报错则去掉-g。

## 四：安装vue-cli（用来生成vue模板的工具） ##

1.  输入**cnpm install vue-cli -g** 进行安装。

## 五：新建一个Vue项目测试一下 ##

1.  1.  在某个盘新建一个文件夹，命令行输入vue init webpack xxx（项目名）进行创建，按下enter键进行多次确认，最后一步选No.
    2.  cd xxx（项目名）,即进入所创建的项目中。
    3.  输入 cnpm install下载安装项目的依赖。
    4.  输入cnpm run dev ，然后在浏览器通过http://localhost:8080地址访问。

[vue]: https://www.cnblogs.com/aspstudy/p/10447639.html