vue2篇（1）准备工作

Tequil_a

已于 2022-12-01 14:34:33 修改

阅读量424

点赞数

文章标签： vue.js javascript 前端

于 2022-12-01 14:30:19 首次发布

本文链接：https://blog.csdn.net/qq_58487756/article/details/128130861

版权

vue2项目准备工作

前提

安装node.js
vscode

这些可以去网上搜索下过来就行，记得nodejs加入一下环境变量，防止出现意外。

一、首先全局安装Vue-cli脚手架

进入终端
C:\Users\Administrator>npm install -g vue-cli
安装成功后查询vue版本
C:\Users\Administrator>vue -V
出现2.9.6表示vue-cli全局搭建成功

二、指定目录搭建项目

//cd $ 自定义路径 $
vue init webpack project

选择一下项目的相关配置

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
�������ļ�
? Project name project #项目名
? Project description A Vue.js project #项目描述
? Author                                     #作者
? Vue build standalone      #构建项目
? Install vue-router? Yes        #是否使用路由
? Use ESLint to lint your code? No    #是否使用ESLint管理代码
? Set up unit tests No      #是否单元测试
? Setup e2e tests with Nightwatch? No       #是否e2e测试
#使用npm
? Should we run `npm install` for you after the project has been created? (recommended) npm

然后进入项目目录，使用npm install安装依赖
D:\vue-test\project>npm install

|------build //项目构建相关配置代码
|------config //项目开发环境配置
|------node_modules //各种依赖
|------src //主代码编写路径
|------|------assets //存放资产文件、图片等
|------|------components //vue公共组件
|------|------router //存放路由JS文件，用于页面跳转
|------|------App.vue //页面入口文件
|------|------main.js //程序入口文件，加载各种依赖和组件
|------static
|------.babelrc
|------.editorconfig
|------.gitignore
|------package.json //项目基本信息
|------README.md

终端输入npm run dev启动项目，默认为8080端口，在浏览器中打开本地网址。
（1）.vue项目自带热部署
（2）.如果浏览器打开之后，没有加载出页面，又可能是本地的8080端口被占用，此时需要修改一下配置文件config>index.js中的port端口号，如果正常显示则可以忽略。你也可以改成你自己的端口号防止一些热门的端口号被占用导致一些意外的麻烦。
（3）.进入网页跳转会发现是8080/#/而不是正常的8080/，这是因为router中index.js的设置，可以在routes: 增加一条mode: 'history' ,来避免以后的路由跳转bug情况。