Vue手把手案例

一、安装编译器vscode

1、在官网上下载vscode，按照步骤安装完成
官网地址：https://code.visualstudio.com/
2、安装完成：
在桌面上展示快捷键图标

二、安装node.js

1、在官网上下载node.js，按照步骤安装完成
官网地址：https://nodejs.org/en/
安装成功标志：在cmd，输入命令：npm -v ,展示对应的版本号：

2、安装高版本vue-cli
在cmd输入命令：npm install -g @vue/cli

安装成功后，输入命令：vue -V，展示对应内容

三、vue工程创建

1、创建一个空的目录文件VueTest

2、打开vscode
目录：File ->open folder ,选中刚创建的空文件夹VueTest,打开项目

3、打开终端
目录：Terminal ->new Terminal,在下方出现一个终端的内容

2、在终端输入命令：
vue -V

报错：

• vue -V

•   + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
  
  
  

解决方法：
1、在Windows应用中找到Windows PowerShell，以管理员运行：
2、在命令框输入： set-ExecutionPolicy RemoteSigned， 然后输入A即可解决

再次输入 vue -V ,展示对应的版本号

4、配置化vue项目
在终端Terminal下输入命令：vue ui,自动打开浏览器，允许配置化

四、使用配置化工具进行Vue项目创建

1、配置化vue项目
在终端Terminal下输入命令：vue ui,自动打开浏览器，允许配置化

2、打开链接，创建文件夹

3、手动配置

4、选择功能
Router、Vuex、CSS、使用配置文件 这4个内容

5、创建预设

6、不保存预设，创建项目
7、等待一会儿，创建成功后情况

8、安装插件
在插件里面，安装2个插件：vuetify和axios

安装成功后，展示内容

9、完成后，在vscode打开内容如下：

目录：
node_modules:依赖包
main.js:引用的插件
package.json:上传内容

五、运行serve

在Terminal输入命令：npm run serve

运行后，打开下方生成的链接

打开页面内容，展示如下：

六、新增SignIn内容
1、在component中增加SignIn.vue
代码：

登录

2、添加router内容
在router目录的index.js中，注释原有的Home.vue，新增导入SignInVue

代码如下：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
// import Home from ‘…/views/Home.vue’
import SignIn from ‘…/components/SignIn.vue’

Vue.use(VueRouter)

const routes = [

// {
// path: ‘/’,
// name: ‘Home’,
// component: Home
// },
// {
// path: ‘/about’,
// name: ‘About’,
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
// }
{
path: ‘/’,
name: ‘SignIn’,
component: SignIn
}
]

const router = new VueRouter({
routes
})

export default router

3、在APP.vue中修改对应内容
代码如下：

4、运行内容：
http://localhost:8080/，页面展示如下：