vue安装配置与使用总结

最新推荐文章于 2024-07-22 14:32:17 发布

liuye066

最新推荐文章于 2024-07-22 14:32:17 发布

阅读量492

点赞数

分类专栏： H5 混合开发文章标签： vue nodejs npm css

本文链接：https://blog.csdn.net/liuye066/article/details/115751794

版权

H5 同时被 2 个专栏收录

22 篇文章 3 订阅

订阅专栏

混合开发

21 篇文章 1 订阅

订阅专栏

本文介绍了如何下载并安装Node.js，然后通过npm和CDN两种方式安装Vue，包括使用脚手架创建项目、配置Vue CLI和淘宝镜像加速。重点讲解了Vue CLI 2和3的项目结构和搭建步骤，适合前端开发者学习和实践。

摘要由CSDN通过智能技术生成

Vue安装

1. 下载安装nodeJs，

中文官方下载地址：http://nodejs.cn/download/

Node.js 历史版本下载地址：https://nodejs.org/dist/

node.js安装包自带npm，无需独立安装。

查看当前的 Node 版本：

$ node -v
v4.4.3

查看当前的npm版本：

npm -v

2.安装vue

（1）npm方法

$ npm install vue

（2）CDN方法:

对于制作原型或学习，你可以这样使用最新版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

还可以用

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

直接使用<script>标签引入，此时的vue.js会被注册为一个全局变量，直接使用即可。

补充：<script>标签的defer和async属性，这两个属性会使引入的内容异步加载，不会影响页面的加载速度。但在async属性下，引入的文件没有顺序，谁加载得快就先用谁。在<script>标签相互依赖的情况下，这种加载方式会直接导致报错。若使用defer属性，文件就会按照顺序依次加载，保证了文件的先后顺序。

<script defer src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3. 淘宝镜像

直接使用npm时，下载速度可能会比较慢。可以使用cnpm代替或直接切换到淘宝镜像。

（1）npm切换到淘宝镜像方式

npm config set registry https://registry.npm.taobao.org

（2）直接使用淘宝镜像命令方式：

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

cnpm版本，有版本号即安装成功（直接支持cnpm命令，和npm一样只是库不同）

cnpm –v

4. 脚手架安装

npm install vue-cli -g #安装vue-cli脚手架
npm uninstall vue-cli -g #卸载vue-cli脚手架

或

cnpm install --global vue-cli

或

npm install -g @vue/cli (-g表示全局安装，@表示最新的版本)

查看版本

    vue --version # 2.9.6
    vue -V

5. 生成vue 项目

（1）使用vue-cli2

vue init webpack project

生成的目录结构：

介绍一下目录及其作用：

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目所需要的各种依赖模块。

src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等

components:目录里放的是一个个的组件文件

router/index.js：配置路由的地方

App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）,公共的组件就直接配置到这个文件中，私有的就配置到components中

static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

test：初始测试目录，可删除

index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

README.md：项目的说明文件。

webpack.dev.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

webpack.base.config.js

.babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

.gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

.postcssrc.js:前缀的配置（css转化的配置）

.editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）

.eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

.eslintignore:忽略eslint对项目某些文件的语法规则的检查

简单来说项目加载的过程是：

index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue

（2）vue cli3.0 项目搭建

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）

安装：

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：（Vue CLI 3需要 nodeJs ≥ 8.9）

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

安装：
cnpm install -g @vue/cli //yarn global add @vue/cli

vue -V   检查vue版本号

vue create 搭建新项目

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

首先，会提示你选择一个preset（预设）：

第一次使用时我选的default，如下图第一个“ my-default”是我之前保存的预设配置，如今便可以直接用了

Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

手动选择需要添加的配置项：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试