全局安装 webpack
右键 ==> 属性
不勾选 快速编辑模式
不勾选快速编辑模式是为了:敲完命令安装的时候,用鼠标点一下,然后发现命令不动了,我们鼠标点一下,就卡在那里了,以为我们要输入字符
输入命令安装 webpack:
npm install webpack -g
全局安装 vue 手脚架
输入命令安装vue 手脚架:
npm install -g @vue/cli-init
接下来就可以使用vue cli工具,使用 命令,快速的创建模块化的脚手架工程
使用 vue 初始化一个应用,名字叫 appname,使用webpack模板创建的
桌面创建文件夹
使用命令创建vue项目报错,说不是vue不是内部命令
解决办法,进行全局vue安装
npm install --global vue-cli
然而,有报错了(不一定都会出这个错,我怀疑我这里的网络有问题,就用离线了)
继续解决:离线安装,github下载离线包https://github.com/vuejs-templates/webpack
解压后改名webpack放在C:\Users\Administrator\.vue-templates目录下
我是没有.vue-templates文件夹的,需要自己手动创建
完了后,就行了
时间有点长,等待一两分钟
到vue-demo目录下执行
npm run dev
启动vue项目
完了显示
访问下 localhost:8080
这个是vue-demo文件夹
我们用vscode打开这个项目
在终端输入命令:npm run dev
也可以启动项目
下面的部分跟着视频看就行了,没什么坑了,也很简单
贴一下代码
Hello.vue
<<template>
<div>
<h1>你好,Hello,{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return{
name: "周杰伦"
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/hello">去hello</router-link>
<router-link to="/">去首页</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: 'Hello',
component: Hello
}
]
})