Vue项目环境配置以及搭建项目、启动项目

亦凉 2022-04-05 03:16 424阅读 0赞

一、安装软件及相关插件

1、先安装nodejs,这里不多说下面两个进行验证安装是否成功

node -v
    npm -v

2、然后安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、运行下面进行查看是否安装成功

cnpm -v

4、接着安装webpage

npm install webpack -g

5、再安装vue-cli脚手架

npm install vue-cli -g

二、创建项目

1、选择一个文件夹作为存放项目文件的父级文件夹然后按住Shift右键点击该文件夹，选择在此处打开命令窗口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

2、在打开的窗口中输入vue init webpack + 项目名 (如下图)，遇到有闪烁的光标回车

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1][]

发现这个以为出错了，后来回车一下就好了

接着后面执行开始创建

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2][]

3、创建好项目之后，使用webstrom打开vue项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3][]

4、启动项目，项目中若有node\_modules文件夹，先删除，然后分别执行

npm install或者cnpm install（安装依赖）

推荐使用cnpm install

npm run dev（开发环境启动项目）

npm run build（打包项目）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20220405/7bae9516c69d4f3ea09a37645298741e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1]: /images/20220405/339f1b757a164b748a9220b23d2dacd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2]: /images/20220405/3c767d7b477a4e59a0da0fc052ca355e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3]: /images/20220405/1291f7c7f8954cfcbe13528a8eff6873.png