安装步骤

  1. 创建一个目录,我们这里定义为Vue
  2. 在Vue目录打开dos窗体,输入如下命令:vue create myproject
  3. 选择自定义

     

  4. 先选择要安装的项目,我们这里选择4个

     

  5.选择yes

     

  6.选择SCSS/SASS

    

  7.选择第一个

    

   8.选择第一个

    

  9.选择自己的配置文件

    

  10.选择no

    

  11.等待下载完成

  12.下载完成后,需要安装一下相关插件,进入到“package.json”文件的同级目录并打开dos窗体执行如下命令:npm install

  13.安装完成之后,同样在“package.json”目录执行以下命令启动服务: npm run serve

  14.启动成功之后,可以看到如下提示:

    

  15.ok,如上提示,我们在浏览器输入:http://localhost:8080,出现如下页面表示成功了。

    

改造项目

前端框架我们使用vant,vant官网如下:https://youzan.github.io/vant/#/zh-CN/intro

2.1 安装vant

命令:npm i vant -S

说明:

npm i module_name  -S  = >  npm install module_name --save    写入到 dependencies 对象

npm i module_name  -D  => npm install module_name --save-dev   写入到 devDependencies 对象

npm i module_name  -g  全局安装

i 是install 的简写

2.2 安装 babel-plugin-import

命令:npm i babel-plugin-import -D

2.3 项目结构介绍

2.3.1 package.json

package.json存放的是项目所需要的包,以及项目的一些配置,重点说一下dependencies是存放的程序发布时所依赖的包,devDependencies存放的是开发阶段所需要的包。每个包都有一个版本号,具体安装卸载可参考npm安装卸载包

2.3.2 babel.config.js

babel.config.js存放的是项目所需要的插件,比如我们要引入vant插件,那么需要配置如下:

module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

主要是plugins里面的内容。

2.3.3 src/router.js

这个文件是路由文件,存放的路由信息,指定url过来的路由转发到哪个组件上面,如下:

import Vue from 'vue'
import Router from 'vue-router' import Home from './views/Home'
import Cart from './views/Cart'
import Category from './views/Category'
import PersonalCenter from './views/PersonalCenter' Vue.use(Router) export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path:'/',
redirect:'/home'
},{
path:'/home',
name:'home',
component:Home
},{
path:'/cart',
name:'cart',
component:Cart
},{
path:'/category',
name:'category',
component:Category
},{
path:'/personalCenter',
name:'personalCenter',
component:PersonalCenter
}]
})

2.3.4 src/main.js

全局的一些引用,比如注册全局组件。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import TabBar from './components/TabBar' Vue.config.productionTip = false
Vue.component("tab-bar",TabBar); //注册全局组件 new Vue({
router,
render: h => h(App)
}).$mount('#app')

2.3.5 src/App.vue

这是主页面的组件,所有的主页布局在这里实现。

<template>
<div id="app">
<tab-bar></tab-bar>
<router-view/>
</div>
</template> <style lang="scss"> </style>

我们可以看到,主页就一个tab-bar和router-view,通过tab-bar就可以将路由映射到router-view里面去。实现单页面应用。

npm安装卸载包

3.1 简单安装

npm i webpack -S ,这个命令就是把webpack安装到项目局部,同时指定参数-S表示安装到dependencies节点,如果将-S修改为-D,那么就安装到devDependencies节点。

3.2 全局安装

npm i webpack -S -g,这里的-g就表示全局安装,安装之后我们可以通过命令npm root -g查看全局安装所在路径。

3.3 卸载安装包

npm uninstall webpack,卸载webpack模块

npm uninstall webpack -g,卸载全局的webpack模块

3 发布

上面步骤完成之后总需要发布的,因为.vue这种格式浏览器是无法解析的,发布就是把这些类似于.vue的文件发布为浏览器能解析的js文件等。

发布命令:npm run build

注意查看日志报错,依次解决就好,比如console.log这种就要删除才行。

一步一步搭建vue项目的更多相关文章

  1. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  2. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  3. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  4. vue-cli搭建vue项目更新

    vue-cli搭建vue项目更新 更新之前一篇博客错误的地方,在使用vue init webpack xxx 之后并不需要使用npm install 下载依赖包,而是直接根据提示 打开文件夹 再npm ...

  5. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  6. 教你如何搭建vue项目

    笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...

  7. 利用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  8. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  9. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  10. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

随机推荐

  1. windows----------如何禁用PC端微信的开机启动

    1.开始菜单--->运行--->输入msconfig 2.如下图,然后点击启动 3.打开任务管理器 4.右键wechat,然后禁用.

  2. nginx解决跨域

    location ~* \.(eot|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; add_header Acces ...

  3. supervisor配置详解(转)

    有阵子没写博客了,这段时间一直在研究python django框架和前端相关的东西.楼主学通信的,对web这一块啥也不懂,学了一个礼拜django,接着学了2个礼拜前端,感觉还是做不出来一个好看的页面 ...

  4. 2015年上海现场赛重现 (A几何, K暴力搜索)

    A: 题目链接 :https://vjudge.net/contest/250823#problem/A 参考 : https://www.cnblogs.com/helenawang/p/54654 ...

  5. sql sugar

    事务 using (var db = new SqlSugarClient(new ConnectionConfig() { ConnectionString = Config.xxx, DbType ...

  6. Truck Adblue Emulator For SCANIA

    For sale online Truck Adblue Emulator For SCANIA See the price Where to buy? Truck Adblue Emulator F ...

  7. 二分法bug修复

    public class Main { public static void main(String[] args) { int[] arr = {1,2,3,4,5,6,7,8,9,10}; int ...

  8. MySQL常用dos命令

    MySQL的基本目录 登陆MySQL 查看数据库 Show databases; 创建数据库 Create database 数据库的名字; 标准创建语句: Create database if no ...

  9. spider爬虫练习

    package com.jinzhi.spider; import java.io.BufferedReader;import java.io.IOException;import java.io.I ...

  10. Flutter数据库Sqflite之增删改查

    Flutter数据库Sqflite之增删改查   简介 sqflite是Flutter的SQLite插件,支持iOS和Android,目前官方版本是sqflite1.1.3 sqflite插件地址:h ...