vue学习

Vue-cli脚手架的学习

1、安装 nodeJS的环境

下载地址:https://nodejs.org/zh-cn/download/

检查相关node 和 npm的环境,运行cmd命令窗口

1
2
3
4
5
C:\Users\uoso>node -v
v12.18.2

C:\Users\uoso>npm -v
6.14.5

如果输入以上命令时能出现相应的版本号,证明环境可用

2、配置国内的NPM插件库

1
C:\Users\uoso>npm install cnpm -g

3、安装Vue-cli脚手架库

1
C:\Users\uoso>npm install vue-cli -g

4、创建一个vue 项目

  • 进入想要创建的文件夹目录,如:

    1
    2
    3
    4
    5
    C:\Users\uoso>F:

    F:\>cd F:\UoSo-Project

    F:\UoSo-Project>
  • 创建项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    F:\UoSo-Project>vue init webpack uoso-vue-demo
    # 设置项目名称
    ? Project name uoso-vue-demo
    # 设置项目的描述
    ? Project description A Vue.js project
    # 设置项目作者信息
    ? Author zxj <1845124851@qq.com>
    # 设置vue的构建模式
    ? Vue build standalone
    # 是否安装vue 路由
    ? Install vue-router? No
    # 是否使用ESLint
    ? Use ESLint to lint your code? No
    # 是否使用测试
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) no

    # 基本上都是选择no 项目创建成功信息

    # Project initialization finished!
    # ========================

    To get started:

    cd uoso-vue-demo
    npm install (or if using yarn: yarn)
    npm run dev

    Documentation can be found at https://vuejs-templates.github.io/webpack
  • 进入项目

    1
    F:\UoSo-Project>cd uoso-vue-demo
  • 安装相关依赖

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    F:\UoSo-Project\uoso-vue-demo>npm install

    # 配置阿里淘宝的镜像
    npm install --registry=https://registry.npm.taobao.org

    # 卸载
    # 全局安装卸载工具
    npm install rimraf -g
    rimraf node_modules

    # 查看安装的全局包
    npm list -g --depth 0

    +-- bower@1.8.8
    +-- cnpm@6.1.1
    +-- docsify-cli@4.4.1
    +-- hexo@5.2.0
    +-- node-pre-gyp@0.15.0
    +-- rimraf@3.0.2
    +-- webpack@5.0.0
    +-- webpack-cli@4.0.0
    `-- yarn@1.22.10
  • 启动当前项目

    1
    F:\UoSo-Project\uoso-vue-demo>npm run dev
  • 使用 http://127.0.0.1:8080/ 访问启动的项目

5、安装Vue的router相关库

1
F:\UoSo-Project\uoso-vue-demo>npm install vue-router --save-dev

6、安装 element ui

1
F:\UoSo-Project\uoso-vue-demo>npm i element-ui -S

7、安装SASS加载器

1
2
3
4
5
npm install sass-loader node-sass --save-dev --registry=https://registry.npm.taobao.org
npm i sass-loader@7 node-sass -D

# 卸载
npm uninstall node-sass