vue1——vue的安装和运行

注意：安装vue之前需要先安装node.js

Vue项目初始化，如果已经安装了vue-cli，从第二步开始才做

1、安装：vue-cli
npm install -g @vue/cli
2、初始化项目：这个就是创建项目，先cd 到你要创建项目的文件夹下
vue init webpack objectname
3、进入项目文件夹：cd objectname 文件夹下
4、安装依赖：每次新建或导入项目时，都要在项目的根目录下执行，所以这里要cd 到项目项目根目录
npm install
5、运行项目，这个也要在项目的根目录下执行
npm run dev

注意：系统会自动生成一个README.md 文件，这个文件是给开发者记录用的说明文档，我们可以吧开发中需要注意的地方记录在这里

项目目录结构

1、index.html : 项目根视图
2、.postcssrc.js : postcss 配置文件，用于配置git管理或其他管代码是的忽略文件
3、editorconfig : 基本信息的配置文件，一本不需要手动设置什么
4、.babelrc ： ES6相关设置
5、static文件夹 ：项目的静态文件存储文件夹，这个可以直接通过浏览器访问
6、src文件夹 ：源码文件，存储项目代码
7、node_modules文件夹 ： 三方依赖库的存放文件
8、config文件夹 ： 存放开发过程中服务器上的配置和项目属性设置等的配置文件，如：服务器跨域、生产环境、开发环境等的配置
9、build文件夹 ： 存放logo，build使用的 服务器配置相关文件、生成配置文件、开发配置文件等文件

src下目录说明：

1、 main.js : 入口文件
2、App.vue : 第一个vue组件
3、components文件夹 ： 子组件存放路径
4、assets文件夹 ： 开发过程中要使用的公共文件的存放文件夹，例如：字体、图片、视频等

安装 cnpm

npm

• npm是node.js安装的时候自动安装的，所有不用单独安装
• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

npm命令

• npm -v 来测试是否成功安装
• 查看当前目录已安装插件：npm list
• 更新全部插件： npm update [ --save-dev ]
• 使用 npm 更新对应插件： npm update <name> [ -g ] [ --save-dev]
• 使用 npm 卸载插件： npm uninstall <name> [ -g ] [ --save-dev ]

cnpm

• 淘宝团队做的国内镜像，因为npm的服务器位于国外，速度比较慢，并且有些设置经常安装不上，可能会影响安装。淘宝镜像在国内，速度快，并且淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。所以国内我们最好安装和使用cnpm
• 安装：命令提示符执行
  npm install cnpm -g --registry=https://registry.npm.taobao.org
• cnpm -v 来测试是否成功安装

通过改变地址来使用淘宝镜像

• npm的默认地址是https://registry.npmjs.org/
• 可以使用npm config get registry查看npm的仓库地址
• 可以使用npm config set registry https://registry.npm.taobao.org来改变默认下载地址，达到可以不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否成功。

nrm

• nrm包安装命令： npm i nrm -g

• nrm能够管理所用可用的镜像源地址以及当前所使用的镜像源地址，但是只是单纯的提供了几个url并能够让我们在这几个地址之间方便切换

• nrm ls即nrm list，查看所有可用的镜像，并可以切换。*号表示当前npm使用的地址，可以使用命令nrm use taobao或 nrm use npm来进行两者之间的切换。

  image

-g -S -D

• -g：全局安装。 将会安装在C：\ Users \ Administrator \ AppData \ Roaming \ npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录;全局安装可以通过命令行任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过要求调用;
• -S：即npm install module_name --save,写入package.json的dependencies ,dependencies 是需要发布到生产环境的，比如jq，vue全家桶，ele-ui等ui框架这些项目运行时必须使用到的插件就需要放到dependencies
• -D：即npm install module_name --save-dev,写入package.json的devDependencies ,devDependencies 里面的插件只用于开发环境，不用于生产环境。比如一些babel编译功能的插件、webpack打包插件就是开发时候的需要，真正程序打包跑起来并不需要的一些插件。

为什么要保存在package.json 因为node_module包实在是太大了。用一个配置文件保存，只打包安装对应配置文件的插件，按需导入。

作者：Upcccz
链接：https://www.jianshu.com/p/115594f64b41
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。