您现在的位置是:首页 > 正文

“微商城”项目(2准备工作)

2024-04-01 03:59:38阅读 2

一.安装Node.js

本项目使用Vue.js前端框架进行开发,在创建项目之前需要先下载Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以让JavaScript运行在服务器端。接下来对Node.js的下载和安装进行详细讲解。

  1. 打开Node.js官方网站,找到Node.js下载地址,如下图所示。

 从上图可以看出,Node.js有LTS和Current两个版本,在这里选择LTS版本进行下载即可。

或者我的百度网盘资源下载:

链接:https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码:huan

  1. 1双击安装包进行安装,如下图所示。安装过程全部使用默认值。(建议不要放C盘)

        1.2删除隐藏文件.npmrc(C:\Users\你自己的名字)[因为我已经删除了,这里就无法截图]

        2.安装git-bash命令行工具,安装过程全部使用默认值一直Next即可(建议不要放C盘)

我的百度网盘资源下载:

链接:https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码:huan

        3.打开git-bash命令行工具(在桌面空白处单击右键---->Git Bash Here)

 查看Node.js版本信息,node -v 如下图所示。

        4.为了提交开发效率,可以利用npm安装淘宝镜像的cnpm,示例代码如下。

切换淘宝镜像:npm config set registry https://registry.npm.taobao.org

查看镜像源:npm config get registry

上述代码,表示npm持久使用淘宝镜像安装依赖包。

二.安装vue-devtools

vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用,只需下载官方压缩包,配置Chrome浏览器的扩展程序即可使用。下面简单介绍安装流程。

  1. 下载vue-devtools-5.1.1.zip压缩包到本地。

或者我的百度网盘资源下载:

链接:https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码:huan

        2.将压缩包进行解压,然后切换到解压好的vue-devtools-5.1.1目录

2.1单击右键--->Git Bash Here-->输入以下命令进行依赖安装。

npm install

2.2构建vue-devtools工具插件,执行命令如下。

npm run build

2.3.将插件添加至chrome浏览器。单击浏览器地址栏右边的“”按钮,在弹出的菜单中选择“更多工具”-“扩展程序”,如下图所示。

在上图中,单击“加载已解压的扩展程序”按钮,此时会弹出选择框,需要用户选择扩展程序目录。找到vue-devtools-5.1.1/shells/chrome目录,将其添加到扩展程序中。

2.4配置完成后,可以看到当前vue-devtools工具信息,并在Chrome浏览器窗口的右上角会显示Vue的标识,如下图所示。

 

三.安装Vue脚手架

1.我们在项目的根目录下---->单击右键------Git Bash Here

1.1Vue CLI 3.x版本的包名称由vue-cli(旧版)改成了@vue/cli(新版),如果已经全局安装了旧版的vue-cli(1.x或2.x),需要通过如下命令进行卸载。

npm uninstall vue-cli -g

1.2通过npm方式全局安装@vue/cli脚手架,具体命令如下。

npm install @vue/cli@3.10 -g

1.3安装完成后,为了检测是否安装成功,使用如下命令来查看vue-cli的版本号。

vue -V     (或者vue --version)

2.打开命令行工具,使用vue create命令创建项目,它会自动创建一个新的文件夹,并将所需的文件、目录、配置和依赖都准备好。

2.1创建项目命令如下。(vue_shop04是项目名称,这个命名可以换成其他

vue create vue_shop04

执行上述代码后,Vue CLI提示用户选取一个preset(预设),其中default是默认项,在这里选default即可,示例代码如下。

Vue CLI v3.10.0

? Please pick a preset: (Use arrow keys)

> default (babel, eslint)

  Manually select features

(若这里报错了,把C盘里面的   users/你的名字/ vue.rc文件里的yarn      改成    npm)

命令行安装成功如下:

在vscode中插件安装后的结果,如下图所示。

 在D:\vue\end-project下自动生成vue_shop04

四.配置VS Code

Visual Studio Code(简称VS Code)是由微软公司推出的一款免费、开源的编辑器, 推出之后便很快流行起来,深受开发者的青睐。作为前端开发人员来说,一个强大的编辑器可以让开发变得简单、便捷、高效。本书选择基于VS Code编辑器进行讲解。

1.在VS Code中打开刚创建好的vue_shop04项目,在项目根目录新建.editorconfig文件,配置代码风格,示例代码如下。

 [*.{js,jsx,ts,tsx,vue}]
indent_style = space 
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

 2.接下来,安装Vetur扩展。在VS Code界面左侧栏找到插件扩展(Extensions)图标,搜索并安装Vetur插件,插件扩展图标如下图所示。

 Vetur插件安装完毕之后的界面效果如下图所示。

 在vue_shop04项目根目录创建.vscode\settings.json文件,在json文件中配置代码风格。

{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  }
}

 五.启动和退出项目

1.进入vue_shop04文件夹中,单击右键------>Git Bash Here

2.项目创建完成后,使用如下命令启动项目。

npm run serve

执行命令后,会默认启动一个本地服务,如下图所示。

 3.在浏览器中打开http://localhost:8080,页面效果如下图所示。

 4.如果想要退出项目,在命令行工具中,按Ctrl+C

六.安装vue-router

使用npm方式为项目安装vue-router,将路由文件单独存放在src目录下的router.js文件中。当组件准备好之后,开始创建路由。vue-router安装命令如下。

进入vue_shop04文件夹中,单击右键------>Git Bash Here(前面打开的那个不能关闭,我们要重新打开一个)

npm install vue-router@3.1 --save

安装完成后,将src/router.js路由文件创建出来,具体代码如下。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './components/HelloWorld.vue'
var router = new VueRouter({ // 创建路由实例对象router
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home, name: 'home' }
  ]
})

export default router     // 暴露路由对象属性

创建src\router.js文件后,需要在src\main.js入口文件中引入该文件,并在Vue实例上注册,如下所示。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

保存上述代码,启动服务进行测试。

npm run serve

在浏览器中打开http://localhost:8080,执行上述代码后,会看到地址栏出现了“/#/home”,表明设置成功,效果图如下。

 七.安装Vuex

1.使用npm方式为项目安装Vuex,安装命令如下。

npm install vuex@3.1 --save

2.在src\main.js文件的import App from './App.vue' 语句下引入如下代码。

import store from './store'

并且在Vue实例上注册

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

八.安装Mint UI

Mint UI是基于Vue.js的移动端组件库,使用Vue技术封装出来了成套的组件,可以无缝的和Vue项目进行集成开发。考虑到在项目中用到了该框架,所以需要先安装Mint UI,安装命令如下。

npm install mint-ui@2.2 --save

将Mint UI安装完成后,在src\main.js中引入,代码放置在new Vue前面,示例代码如下。

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

九.安装MUI

打开MUI官方网站https://github.com/dcloudio/mui,找到MUI下载地址下载到本地

或者百度网盘资源下载:

链接:https://pan.baidu.com/s/1lSsCjf-_zx1ymu6uZeG26Q?pwd=huan 
提取码:huan

在本项目中,把MUI相关的css、js等资源放置在src/lib目录下,如下图所示。

然后在main.js文件中的import router下面添加代码,引入MUI的样式文件。

import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'

 

由于MUI的代码在ES Lint的语法检查中不通过,为了避免报错,将MUI的js目录从语法检查中排除。在项目根目录创建.eslintignore文件,内容如下。

src/lib/mui/js

十.安装sass

sass是Vue中常用的CSS预处理器之一,安装Sass/SCSS,具体命令如下。

npm install sass-loader@8.0 --save-dev

npm install node-sass@4.13 --save-dev

npm install sass@^1.3.0 --save-dev

npm i fibers -D

1.安装完成后,重新编写src\App.vue文件,示例代码如下。

<template>
  <div class="container">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
#app {
  font-family:'Avenir',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  box-sizing: border-box;
}
.container {
  padding-top: 40px;
  padding-bottom: 50px;
  overflow-x: hidden;
}
</style>

2.在src\components\HelloWorld.vue文件中,编写如下代码。

<template>
  <div>
    Hello World
  </div>
</template>

3.在src目录下创建store.js(内容为空)

4.保存上述代码,运行测试程序。

npm run serve

5.在浏览器中打开http://localhost:8080,执行上述代码后,会看到如下页面效果,表明设置成功。

接着这篇文章的是“微商城”项目(3页面布局)

若出现问题可以私信我,我如果能解决,会尽量帮忙的(●ˇ∀ˇ●)

网站文章

  • 交换两个变量的值,不使用第三个变量(两种方法)

    //交换两个变量的值,不使用第三个变量。 //有两种解法, 一种用算术算法, 一种用^(异或) //异或:相同为0,不同为1。相当于减法。 #include int main() { int a = 8; int b = 9; printf(&quot;初始状态:a = %d, b = %d\n&quot;,a,b); a = a + b; b = a - b; a = a - b;

    2024-04-01 03:59:31
  • 解决HTML中换行会出现间隙问题

    解决HTML中换行会出现间隙问题

    源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。 例如: 小米网 MIUI 效果如图: 解决办法: 在换行处父级标签加css: {font-size:0}; 这样换行后就不会有空格出现. html: 小米网

    2024-04-01 03:59:24
  • 嵌入式web项目框架解读

    项目框架敬上!!!本期主要分享的是使用网页控制硬件的流程,主要是梳理了整个项目的基本框架,项目内容相对来讲比较单一,后续会逐步添加功能;

    2024-04-01 03:58:45
  • 关于implementation ‘com.android.support:appcompat-v7:28.0.0-alpha运行报错

    关于implementation ‘com.android.support:appcompat-v7:28.0.0-alpha运行报错

    今天导入了一个module,并且让项目关联了这个module,发现运行工程的时候死活运行不起来,最后发现运行的报了一个Android dependency 'com.android.support:s...

    2024-04-01 03:58:37
  • linux应用程序使用系统命令点亮LED

    将字符串输出重定向,当前目录没有 test.txt,则创建 text.txt ,并将字符串输出到test.txt 文件中。和直接使用 vi 编辑器打开 test.txt 然后输入 hello 的效果是一样的。在应用程序中,我们可以使用system 函数来调用命令。

    2024-04-01 03:57:54
  • Personal access tokens (classic)与Fine-grained personal access tokens Beta区别

    Personal access tokens (classic)与Fine-grained personal access tokens Beta区别

    GitHub 目前支持两种类型的 personal access token:fine-grained personal access token 和 personal access tokens (...

    2024-04-01 03:57:45
  • 1029-除法求值

    1029-除法求值

    题目如下给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件,其中 equations[i] = [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi...

    2024-04-01 03:57:37
  • 【蓝桥杯每日一练:数列排序】

    问题描述 给定一个长度为n的数列,将这个数列按从小到大的顺序排列。1&lt;=n&lt;=200输入格式 第一行为一个整数n。 第二行包含n个整数,为待排序的数,每个整数的绝对值小于10000。输出格式: 输出一行,按从小到大的顺序输出排序后的数列。 ...

    2024-04-01 03:56:56
  • 简洁精美源于分析透彻,构思明确、求精,逻辑练达。(1)

    /*用户输入100~999999范围之内的任意数(如果不是此范围,则报错),判断是否是自方幂数,用户可以反复输入判断直到不需要为止。自方幂数: 一个n位正整数如果等于它的n个数字的n次方和,该数称为n位自方幂数 123=1的3次方+2的3次方+3的3次方?*/ int 范围 = 10, 位 = 位数(范围), 和 = 0, 判断 = 范围; do { 和 += 乘方(判断 % 10,

    2024-04-01 03:56:47
  • 651. 4键键盘(动态规划)

    651. 4键键盘(动态规划)

    651. 4键键盘题目解题思路代码 题目 假设你有一个特殊的键盘包含下面的按键: Key 1: (A):在屏幕上打印一个 &#39;A&#39;。 Key 2: (Ctrl-A):选中整个屏幕。 Ke...

    2024-04-01 03:56:41