前提,必须安装过下列内容,如果没有安装可参考给出链接中安装步骤进行安装:
1、安装过 node.js
https://www.cnblogs.com/zhousjcn/p/12789508.html
2、安装过 vue-cli
https://www.cnblogs.com/zhousjcn/p/12783142.html
3、安装过 webpack
https://www.cnblogs.com/zhousjcn/p/12789518.html
# vue-cli低于3.0版本结合webpack初始化项目 #
一、在指定目录下执行下列命令,项目生成后就会在该目录下:
vue init webpack 项目名
例如:
vue init webpack sourceplan-ui-test
会出现需要填写部分:
project name 项目名 project description 项目描述 author 作者 vue build 打包方式,回车即可 vue-router 是否需要路由器,填y或者n Use ESLint to lint your code 是否需要 js 语法检测,填y或者n,目前我们不需要 所以 n 回车 Set up unit tests 是否安装 单元测试工具 目前我们不需要 所以 n 回车; Setup e2e tests with Nightwatch 是否需要 端到端测试工具 目前我们不需要 所以 n 回车; Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 项目创建后是否运行?选择 No, I will handle that myself
二、cd 进入刚刚创建的项目中安装各项依赖
cnpm i
三、启动
使用:npm run dev启动即可
# vue-cli 3.0以上版本结合webpack初始化项目 #
一、在指定目录下执行下列命令,项目生成后就会在该目录下:
vue create [ProjectName]
例:
vue create vue-project-init-test
二、会有一些选择,根据各自需求选择即可:
Please pick a preset:(Use arrow keys)
default (babel, eslint) // 该选项后一路回车即可
Manually select features // 选择此选项后会出现下列配置选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? Check the features needed for your project: Babel, TS, Router, CSS Pre-processors
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
三、上面配置选择完毕后就是各项配置下载了,完毕后会在末尾出现下列代码提示:
进入刚刚创建的目录:
cd [Project name]
新的启动方式
npm run serve
* 如果 vue-cli 3.0以上还想使用原来的方式初始化项目,执行下面命令即可:
npm install -g @vue/cli-init