[ vue.js ] (一)安装

vue 开发环境搭建


安装 nodejs

  • 官网下载安装包,直接 下一步 即可
  • https://nodejs.org/en/
    在这里插入图片描述

安装cnpm


淘宝 NPM 镜像

  • 可以使用 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue


vue-cli 2.0 和 vue-cli 3.0 二选一安装就行

vue-cli 2.0

npm install -g vue-cli

vue-cli 3.0

npm install @vue/cli -g
  • vue-cli 3.0 可以用 可视化面板 创建并管理项目
  • 启动可视化面板
    在这里插入图片描述

vue-cli 2.0 创建vue项目

vue init webpack vue_demo

webpack 类似 java 中的 maven
创建好的 vue 项目是可以直接运行的

vue-cli 2.0 运行vue项目

npm run dev
或 
npm start

下载安装依赖


npm install

--verbose 命令,来查看运行细节:
npm install --verbose

npm下载缓慢的话,可以使用淘宝npm源
npm install --registry=https://registry.npm.taobao.org

根据package.json文件

项目打包


  • 直接使用下面命令,就可以把vue项目打包
  • 打包完成后的项目生成在 dist 目录下
npm run build

Webpack下的Vuejs项目文件结构


▸ build/                // 编译用到的脚本
▸ config/               // 各种配置
▸ dist/                 // 打包后的文件夹
▸ node_modules/         // node第三方包
▸ src/                  // 源代码
▸ static/               // 静态文件, 暂时无用
▸ index.html            // 最外层文件
▸ package.json          // node项目配置文件

备注:
1、常用第三方库安装:
npm install stylus stylus-loader -D
npm install axios --save
2、去掉访问路径中的#:
router中添加 mode:‘history’
3、常用指令
-g 指全局安装
–save = -S 安装运行依赖
–save-dev = -D 安装开发依赖


在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页