VUE从零到放弃~
VUE简单快速的跑起来… (自行NODE的安装)
查看node版本
node --version
查看npm版本(高版本node自带npm命令)
npm -v
注册cnpm来代替npm
临时使用 npm --registry https://registry.npm.taobao.org install express
持久使用 npm config set registry https://registry.npm.taobao.org
通过cnpm使用 npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install cnpm -g --registry=https://registry.npm.taobao.org
如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"
安装vue脚手架vue-cli
cnpm install -g vue-cli
安装完后可使用vue -V 查看vue版本
cd到对应的目录下初始化vue项目
vue init webpack [my-project]
Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试
vue项目依赖注入
package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install 安装依赖项(直接在项目文件夹路径下执行)
vue项目启动
cnpm run dev
浏览器访问 http://localhost:8080/#/
vue项目打包
cnpm run build (若出现空白应该是js路径出错)
通过上面的一波操作VUE的版本是2.8(并非3.0以上)
在前面已经使用了cnpm
- 安装过旧版本 卸载方式如下 npm uninstall vue-cli -g //或者 yarn global remove vue-cli
- 卸载后使用 vue -v 就没用了
- Vue CLI 3需要 nodeJs ≥ 8.9
安装@vue/cli(Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli)
cnpm install -g @vue/cli //yarn global add @vue/cli
vue -V 检查vue版本号 就是3.0以上就对了
npm在node自动安装下可能不是最新版
npm -v 查看版本号
npm install npm@latest -g 安装最新版本
npm update [更新相关包]
npm install [相关插件安装便于引用]
npm uninstall (package) 卸载相关插件
npm uninstall -g (package) 卸载全局插件
npm uninstall --save (package) 移除引用中插件
cnpm sync connect 同步模块
直接通过 sync 命令马上同步一个模块(只有 cnpm 命令行才有此功能)
下面我们就一起来用它创建一个简单的项目吧
(进入你想放的文件目录执行cmd)
项目的创建 参考博文
防止博主有天移除博文
*官方提示:如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作,必须通过 winpty vue.cmd create hello-world 启动这个命令
vue create //文件名 不支持驼峰(含大写字母)
my-default 是之前保存的预设配置
default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包
Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包
这里我选择的default,然后简单创建VUE项目。
在执行完之后,会提示你 cd 到项目路径里面。 cd xx
进入项目里面后执行 npm run serve 项目就跑起来了
使用浏览器输入 http://localhost:8080/
通过以上的骚操作基本满足想学VUE,又简单了解后选择继续还是放弃的时候了。
相关疑点
VUE项目若从其他地方下载,没有node_modules目录的情况下。使用cnpm run serve 会提示 相关的包没有此执行命令之类的。 这时候需要直接 cnpm install 下载,有时候也可以执行下 cnpm update 整体更新一下。
关于没有yarn命令的朋友请跟上我的步伐
npm install -g yarn --registry=https://registry.npm.taobao.org
源配置
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
*官方说有两种安装yarn的方式(一是下载安装包 二是choco install yarn)
O(∩_∩)O哈哈~
少侠路过 多多包涵
[ ┭┮﹏┭┮勿喷┭┮﹏┭┮ ]