vue新手环境搭建

1.下载安装git   https://git-scm.com/downloads

2.下载安装node  https://nodejs.org/en/download/

安装成功后测试是否成功用命令行查看版本号 node -v  npm -v

3.使用淘宝的 cnpm 命令行工具代替默认的 npm        

方法:命令提示符执行 npm install cnpm -g –registry=https://registry.npm.taobao.org

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

4.安装vue-cli

方法:命令提示符执行cnpm install -g vue-cli

5.创建一个基于 webpack 模板的新项目

方法:命令提示符执行 vue init webpack my-project

参数1:webpack 使用webpack模板

参数2:my-project 是项目名称

project name? 问项目名称 回车

project description?项目的描述 this is my very first vue project

Author? 作者是谁 summer

use eslint to lint your code? 是否使用这个检查工具 n

setup unit tests with karma + mocha? 单元测试 n

setup e2e tests with nightwatch? 也不需要 n

安装依赖

输入:cd my-first-vue-project(项目名),回车,进入到具体项目文件夹

输入:cnpm install,回车,等待一小会儿

6.跑一下测试环境是否搭建成功

方法1:在cmd里输入:npm run dev 

方法2:在浏览里输入:localhost:8080(默认端口为8080)

最后打开页面代码路径 src下面的App.vue
npm介绍

3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

3.2、使用npm安装插件:命令提示符执行npm install <name> [-g][–save-dev];

3.2.1、<name>:node插件名称。例:npm install gulp-less –save-dev

3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

3.2.3、–save:将保存配置信息至package.json;

3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install –production只下载dependencies节点的包)。

3.3、使用npm卸载插件:npm uninstall <name> [-g][–save-dev]  PS:不要直接删除本地插件包

3.3.1、删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

3.3.2、借助rimraf:npm install rimraf -g 用法:rimraf node_modules

3.4、使用npm更新插件:npm update <name> [-g][–save-dev]3.4.1、更新全部插件:npm update [–save-dev]3.5、查看npm帮助:npm help

3.6、当前目录已安装插件:npm list

欢迎分享本文,转载请保留出处:前端ABC » vue新手环境搭建

赞 (2)
分享到:更多 ()

发表评论 0