使用Vue-CLI脚手架搭建项目和导入项目依赖包

1.首先安装node.js

下载地址:

下载 | Node.js 中文网 (nodejs.cn)

2.安装Vue CLI

window+R 输入cmd

npm install -g @vue/cli

3.本地新建一个文件夹

npm install -g vue-cli

 这条命令执行完成生成文件gshop-client 等待时间较长

vue init webpack gshop-client

 进入gshop-client

cd gshop-client

执行完成后在控制台中输入

npm install 安装项目依赖包

完成后执行npm run dev

游览器输入 http://localhost:8080

本项目下

导入前端项目依赖包

npm install stylus stylus-loader --save-dev

npm install vue-router --save

npm install -save axios

npm install -save vuex

npm install -save mint-ui 组件库

npm install -save swiper 滑动库

npm install -save better-scroll 滑动库

 最后效果

项目目录结构分析

gshop-client 
1-- build: webpack相关的配置文件夹
1-- config: webpack相关的配置文件夹
1-- index.js: 可以配置服务的端口号和静态资源文件夹
1-- node_ modules
1-- srC:源码文件夹
|-- main.js: 应用入口js

|-- static: 静态资源文件夹
1-- .babelrc: babel的配置文件
1--. editorconfig: 通过编辑器的编码格式进行一定的配置
1-- ,eslintignore: eslint 检查忽略的配置文件
1-- .eslintrc.js: eslint 检查的配置文件
1-- .gitignore: git版本控制忽珞的配置文件
1-- index.html: 主页面文件
package. json:应用包配置文件
1-- README .md: 应用描还说明的readme文件