1.nodejs安装
下载地址:https://nodejs.org/en/download/
安装完之后cmd 下输入:node -v 查看是否安装成功。
![87a2cff6b93383392a0b495201b7cf53.png](https://i-blog.csdnimg.cn/blog_migrate/dda7b7659d95d1f316a19bc7386aa1a5.png)
2.查看npm版本
cmd下输入命令:npm -v
![a93d9945c2d0b2ec04f991d48f2a9f57.png](https://i-blog.csdnimg.cn/blog_migrate/a924c39c65f885eece1587ad5fbbe8f3.png)
如果低于3.0版本需要进行升级
升级方法:
在cmd命令下cd到nodejs安装目录,然后输入以下命令:npm update npm
这里要等待一下。更新完成后再使用:npm -v检查一下版本
3.cnpm安装
cnpm是淘宝的一个镜像,安装之后可以使用cnpm安装命令工具,安装速度会加快。
直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org 命令安装即可。
4.安装vue-cli
安装命令为:cnpm install -g vue-cli
安装之后显示:
![5c6784af356e1c262d8c0cbd829be90c.png](https://i-blog.csdnimg.cn/blog_migrate/3418a38820d0f41f987d766aff69acee.jpeg)
一定不要多打空格,我就是因为输入的命令为cnpm install -g vue -cli,多输入了一个空格,而没有安装成功。
这是命令正确时显示的内容:
![87d2880196ec27ff7757abb8cf82cdd2.png](https://i-blog.csdnimg.cn/blog_migrate/88456f366abed9b03cbc55e81bdd5a02.jpeg)
输入vue -V(后面的V一定要大写),检查是否安装成功。出现版本信息则证明安装成功。
![6e986c4c8442951dd015797ddd5bfce8.png](https://i-blog.csdnimg.cn/blog_migrate/d6f2ee5a60cb2105c6dbef6f4208925c.png)
5.新建一个Vue项目
先新建一个存储项目的文件夹,相当于工作空间。此处我新建了一个名为webstormVue的文件夹。进入到此文件夹目录下,在地址栏输入cmd,进入命令窗口。
输入命令:npm install vue-cli -g(下载全局vue-cli)
完成之后,输入命令:vue init webpack firstvue(firstvue是项目名)。输入之后:
![51388cfaedd68a0def21831058045d0e.png](https://i-blog.csdnimg.cn/blog_migrate/ee8b5326bcc88cbb43551e151bde4761.png)
创建完成之后:
cd firstvue(firstvue是项目名称)
cnpm install
cnpm run dev
![4b0577387e2687428c011a3b573c453b.png](https://i-blog.csdnimg.cn/blog_migrate/9cba0f07983417619b01b23a877f23fd.jpeg)
可以看到webstormVue文件夹下有咱们刚刚创建的firstvue项目
![d5a90164ca1b4fd0fd36bad431618f30.png](https://i-blog.csdnimg.cn/blog_migrate/f315cb4742decca2fd3b7eca95c2e31d.png)
访问localhost:8080:
![91e6bf966ec6e02261ce8fe90e496773.png](https://i-blog.csdnimg.cn/blog_migrate/bef286fdb4bdd594ff583ce4c62e264a.jpeg)
6.使用WebStorm打开项目
使用webstorm软件打开刚刚创建的firstvue项目,项目结构如图所示:
![34744e34bc44a021a50d26d3d67aa6eb.png](https://i-blog.csdnimg.cn/blog_migrate/c574c9e76912424c0e8ce4833a0cf49d.png)
7.项目结构说明
build:项目构建(webpack)相关代码
config:配置目录,包括端口号等
node_modules: npm加载的项目依赖模块
src:开发目录
-
- assets:放置一些图片
- components:目录里面放了一个组件文件,可以不用
- App.vue:项目入口文件,我们也可以直接将组件写这里
- main.js:项目的核心文件
static:静态资源目录,如图片、字体等。
index.html:首页入口文件,可以添加一些meta信息或统计代码啥的。
package.json:项目配置文件
8.修改代码
接下来修改原始代码,在页面上显示自己想要的内容
1)修改App.vue
<div id="app">
<img src="static/img/1.jpg">
<router-view/>
</div>
2)修改HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'My first vue project'
}
}
}
</script>
9.运行
![fb2187dfa2a21a967375283d512f0eba.png](https://i-blog.csdnimg.cn/blog_migrate/f4cd1e8eb63ca841101926b3bf00f383.png)
加群:234521566
本文参考:https://blog.csdn.net/qq_37164847/article/details/80926242