Vue安装以及Vue项目创建以及Vue

指令行程序中输入 vue init webpack
project_folder_name (项目文件夹名自定义),回车。

  图片 1如图,node
-v后输出了版本号“v6.11.4”,安装成功。

 

始发安装重视:

安装Node.js:从Node.js官方网站安装Node.js。

勾选开采者格局,并点击 ”加载已解压的拓宽程序…“ 开关。

选择chrome文件夹。

出现上述新闻后,系统将机关打开浏览器(地址为:
npm run dev 后手动打开浏览器,并输入以上地点。

图片 2

在vue.js官方网址看教程,依据教程引导,能够不要脚手架开荒,也能够搭建开辟条件。

  命令行程序中输入 cd project_folder_name
(刚才自定义的类型文件夹名称)步入文件夹。

  安装完成后,直接在指令行程序中输入 vue 验证是还是不是安装成功。

 

因为以前并没有后者项目标阅历,也没学过怎么着前端框架,所以,对于vue.js的读书有个别无计可施。

  图片 3

在命令行程序中输入 cd
D:文档vue-devtools-master 步向工程所在文件夹。

图片 4

此处记录下搭建进程(教程参谋互连网各前辈提供的材质):

指令行程序中输入 npm run build
回车,等待。

图片 5

打开 Google Chrome。

下载好,并解压好后,张开命令行程序。

  安装到位后,直接在命令行程序(win + 奔驰G级 => 输入
cmd)中输入 node -v
验证是或不是安装成功。

这会儿,项目开创完结。

图片 6

不出意外的话,项目相应已经搭建完结了。

图片 7

设置到位。

稍等,会一步一步现身如下消息:

接下来,展开下图目录内的 mainfest.json
文件。

图片 8

修改 background 节点下 persistent 属性的值
为 true。

图片 9

此刻,项目文件夹目录内,应该已经有了 node_modules
文件夹,那么,恭喜!注重安装实现。

在网站栏输入 chrome://extensions 打开扩张程序。

  图片 10如图,现身了近乎上述的消息,那么,安装成功。

  命令行程序中输入 cnpm install
(使用cnpm的源委同地点的cnpm)。回车,等待安装到位。

可下载zip包,归入本地 d盘的文档文件夹里(您随便,爱放哪就放哪,自身找获得就行)。

安装进度告意气风发段落。

点击 Vue Devtools
步入下载页面。

保存。

解压到文件夹(此处,小编从来设定问文件夹名和压缩包同名。)

效果图:

依据提示,完毕就可以。

【这一步依据喜好,自由支配是不是要求,并专擅支配输入内容:在开创项最近,在命令行程序中输入 
cd d:文书档案 步入 d盘 的 文书档案文件夹内。那样就可以将下边步骤创立的门类,创设在 d盘 的 文书档案文件夹内。当然,如上所述,自由支配项目开创的门径。】

综上!

——————————————————————— 分割线 ———————————————————————

试意气风发试吧:命令行程序中输入 npm run
dev

这段时间平素在攻读Vue.js框架。

安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli
(此处输入cnpm正是意味使用天猫商城npm镜像,若使用官方npm,则输入 npm install
–global vue-cli),回车,等待安装实现。

 

照旧在指令行程序中操作 ↓

(以上Win10 64系统)

 

接下去,起头创建项目。

安装天猫商城npm镜像(在境内Tmallnpm镜像速度不慢,可代替官方npm镜像):命令提醒符中输入
=> npm install -g cnpm –registry= 回车,等待安装到位。

Vue Devtools 安装:

在命令行程序中输入 cnpm install
回车,等待。

图片 11

图片 12

发表评论

电子邮件地址不会被公开。 必填项已用*标注