vue 2.x 安装

最新推荐文章于 2024-04-01 11:18:09 发布

心与大海

最新推荐文章于 2024-04-01 11:18:09 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： vue 前端

本文链接：https://blog.csdn.net/XinYuDaHai/article/details/106959452

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 依赖工具安装

2. 安装

有多种方式使用vue，这里介绍最简单的方式，即使用vue脚手架vue-cli。
2.1 vue-cli方式
(1) 安装vue-cli：

npm install -g @vue/cli

注意：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

(2) 快速创建项目
输入一些命令，创建一个名为“hello-word”的vue工程：

vue create hello-world

创建过程可进行各种配置，根据自己需要进行选择。

2.2 npm方式
(1) 安装vue
创建一个工程目录：hello-world-with-npm；
打开cmd窗口，并进入该工程目录；
输入vue安装命令：

npm install vue

(2) 创建html文件
安装完vue包后在工程根目录创建html文件“index.html”，里面写入测试代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>
</html>

3. vue-cli3工程配置相对路径

在根目录下新建 vue.config.js 文件，写入以下内容：

const  path = require('path')
 
function resolve(dir){
    return path.join(__dirname, dir)
}
 
module.exports = {
    chainWebpack(config) {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

配置好后，在工程可以通过以下方式引用组件：

import DataVDemo from "@/demos/DataVDemo"

4. 基本组件安装

4.1 less样式组件

npm install less less-loader --save-dev

安装完可通过以下方式使用：

<style lang="less" scoped>
.data-v-demo {}
</style>

参考

心与大海

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue 2.x 安装

目录1. 依赖工具安装2. 安装参考1. 依赖工具安装Node.js安装修改npm镜像镜像改为淘宝镜像：npm config set registry http://registry.npm.taobao.orgVSCode安装2. 安装有多种方式使用vue，这里介绍最简单的方式，即使用vue脚手架vue-cli。vue-cli方式1.1 安装vue-cli：npm install -g @vue/cli注意：Vue CLI 的包名称由 vue-cli 改成了 @v
复制链接

扫一扫