使用@vue/cli脚手架创建项目

使用@vue/cli脚手架创建项目

 1、安装@vue/cli脚手架工具

npm install @vue/cli -g

2、查看安装后的vue版本

vue -V(大写)

3、创建项目

vue create vue-20210227

4、选择项目的配置

// 选择一个预设

Please pick a preset:

Manually select features

// 选择项目的特征

? Check the features needed for your project:

(*) Choose Vue version

(*) Babel

( ) TypeScript

( ) Progressive Web App (PWA) Support

(*) Router

(*) Vuex

(*) CSS Pre-processors

(*) Linter / Formatter

( ) Unit Testing

( ) E2E Testing  

// 选择vue的版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

>2.x

   3.x (Preview) 

// 是否使用history路由

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)--->n

// 选择css预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

Sass/SCSS (with dart-sass)

Sass/SCSS (with node-sass)

> Less

Stylus 

// 选择代码格式化检查工具

? Pick a linter / formatter config:

ESLint with error prevention only

ESLint + Airbnb config

ESLint + Standard config

> ESLint + Prettier

// 选择格式化代码的时间

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

(*) Lint on save

( ) Lint and fix on commit  

// 选择存放配置文件的位置，使用独立的配置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files

In package.json 

// 是否保存为模板

? Save this as a preset for future projects? (y/N)  y

? Save preset as:temp 

5、切换目录，启动项目

cd vue-20210227

npm run serve

6、在地址栏中访问

App running at:

- Local:   http://localhost:8080/

- Network: http://192.168.102.4:8080/

7、修改启动端口号

1)在package.json同级别的目录下，创建vue.config.js文件

2)编写以下内容

module.exports = {

//开发服务器的配置

devServer: {

host: '127.0.0.1',

port: 8888,

https: false

}

}

3)启动后访问 http://127.0.0.1:8888

8、打包项目

1)vue.config.js文件在先配置大包的参数

module.exports = {

runtimeCompiler: true,

//所有资源使用相对路径

publicPath: './',

//打包后资源存放的目录

outputDir: 'dist',

//设置所有标签属性有双引号

chainWebpack: config => {

config.plugin('html').tap(args => {

args[0].title = 'web19'

args[0].minify = false

return args

})

},

devServer: {

host: '127.0.0.1',

port: 8888,

https: false

}

}

2)执行打包命令

npm run build，在项目中产生dist文件夹，里面就是打包后静态页面和静态资源