分类 Vue 下的文章

官网下载页面https://nodejs.org/en/download/ 选在对应系统下载地址,复制下载地址使用wget 进行下载

创建安装目录 我直接在/usr/local/src目录下进行，下面做软链接时会用到这个目录

# wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz

# xz -d node-v12.18.3-linux-x64.tar.xz

# tar -xvf node-v12.18.3-linux-x64.tar

cd node-v12.18.3-linux-x64/bin/

执行命令查看 node 版本

# ./node -v

v12.18.3
我的node 放在 /usr/local/src 目录下

ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npm /usr/bin/npm
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npx /usr/bin/npx

如果之前装了nodejs 可以使用which node查看node之前的执行目录 把软连接改到这个地址

# node -v

显示版本号v12.18.3 表示完成

下面装一个cpm
npm安装安装插件比较慢，最好安装cnpm（淘宝NPM镜像）：

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

输入cnpm -v 提示结果为：cnpm: command not found，因为应为此时cnpm还是不是全局变量

输入命令：ln -s /node/node-v10.14.1-linux-x64/bin/cnpm /usr/bin/node（根据自己的node目录进行配置）， 此时cnpm就是全局变量了，就可使 cnpm -v 就可以查看版本号了

cnpm install -g vue-cli

安装完后程序会输出你的安装目录 根据自己的node目录进行配置

ln -s /node/node-v10.14.1-linux-x64/bin/vue /usr/bin/vue

测试是否可用

vue -V

创建一个项目
使用命令行进行初始化。

vue create antd-demo

使用组件

 npm i --save ant-design-vue

完整引入

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

局部导入组件

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

/* v1.1.2 */
Vue.component(Button.name, Button)
Vue.component(Button.Group.name, Button.Group)

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button)

Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 报错
原因：vue-cli版本是3以下的，却用了3的命令
解决办法：更新版本
先卸载原来的

cnpm uninstall -g vue-cli

然后下载一个新的

cnpm install -g @vue/cli

安装vue-antd-admin 引用basic分支基础模块
(如果要研究项目的话直接git clone -b basic https://gitee.com/iczer/vue-antd-admin)

git clone -b basic https://gitee.com/iczer/vue-antd-admin

$ npm install

注意用的是用npm run dev 去package.json中看有没有dev信息

$ npm run serve

1.全局安装 (npm install -g @vue/cli 或 yarn global add @vue/cli)

npm install -g @vue/cli

2.查看版本/是否安装成功

vue -V

3.创建项目

vue create my-web-name

4.我引入了vue antd，不需要的可以略过这一步

npm install ant-design-vue --save-dev 
或者 yarn add ant-design-vue

5.开发环境运行项目

npm run serve

如果碰到less-loader未安装报错提示则执行下面安装

npm install --save-dev less-loader less

另安装antd的一个插件 效果是可以按需引入组件

npm install babel-plugin-import --dev

main.js中关于引入antd的部分如下:

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

另外:
vue项目中的node_modules一般不加入版本控制
在clone项目的时候，是少了node_modules目录以及相关文件的
所以拉取项目到本地后需要重新安装依赖

npm install
  1. 1
  2. 2