vue篇1 vue环境安装

一共两个部分

1、安装nodejs 

2、安装vue

一、安装nodejs

https://blog.csdn.net/muzidigbig/article/details/80490884?spm=1001.2014.3001.5502

1、安装node js

历史版本Previous Releases | Node.js

这里以安装 node-v14.14.0-x64.msi 这个版本为例

如果是mac的话，选择这个

node-v14.14.0.pkg

node -v 

2、安装cnpm

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

查看cnpm版本

C:\Users\name>cnpm -v
cnpm@8.4.0 (C:\Users\dgx\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@8.19.3 (C:\Users\dgx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\index.js)
node@14.11.0 (C:\Program Files\nodejs\node.exe)
npminstall@6.6.0 (C:\Users\dgx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\dgx\AppData\Roaming\npm
win32 x64 10.0.19045
registry=https://registry.npmmirror.com

装完node，会自带一个npm的版本

安装的文件就是如下

二、安装vue

安装脚手架工程

装vue-cli2 脚手架构建工具（必须在全局中进行安装）

           在命令行中运行命令 npm install -g vue-cli【如果直接这样安装，是默认的2.9.6的版本】 ，然后等待安装完成。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果上面这样安装，是最新的5.0.4的版本。

卸载命令
npm uninstall -g @vue/cli

最终：

安装指定版本 
npm install -g @vue/cli@4.5.13

查询可用包的版本号
npm view @vue/cli versions --json

版本查询 （检测是否安装成功）
vue -V

官方文档：https://cli.vuejs.org/zh/guide/installation.html         

  是否安装成功：vue -V

vue --version
C:\Users\dgx>vue --version
2.9.6

 注：原来版本2.9.6.卸载然后安装新的 4.0 

如果安装的实2.9.6，如下命令卸载

npm uninstall vue-cli -g

三、初始化一个文件，运行成功

新建一个文件NodeTest

cd NodeTest

vue init webpack firstApp

4、安装编译模块

5、运行

cd  项目名；进入项目中

    安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install   (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

npm install 命令用来安装模块到node_modules目录

npm install  

npm run dev
 

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

vue init webpack vueproject
npm run dev

总的框架
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

参考文章2：

Vue学习之从入门到神经(两万字收藏篇)_白大锅的博客-CSDN博客_vue学习

入门参考：

搭建一个vue小页面（入门vue）_zhenzuo_x的博客-CSDN博客_vue页面

总体参考预览：

1、官网

https://cn.vuejs.org/v2/guide/

2、vue_vue全家桶_个人博客

http://doc.liangxinghua.com/vue-family/1.html

四、安装调试工具

安装方式一：

git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
cnpm install

报错： error While resolving: [1m@vue-devtools/build-tools[22m@[1m0.0.0[22m

安装方式二：直接百度云盘下载

https://blog.csdn.net/a460550542/article/details/120150727